jQuery事件绑定与反绑定，模仿鼠标悬停，事件对象

Posted 2021-08-29 别Null.了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery事件绑定与反绑定，模仿鼠标悬停，事件对象相关的知识，希望对你有一定的参考价值。

页面载入事件

1、javascript的页面载入事件：window.onload

缺点：通过这个方法，用户可以设定一些特定的操作，让其在页面的DOM树加载完毕之后执行，但是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误。

解决方法：等DOM被解析后, 在图像和外部资源加载之前执行我们的函数。

2、 jQuery的页面载入事件(入口函数)：$(function(){ js代码 })

事件绑定

一个事件的响应本身可能实现为一个函数，但是真正要使其得到执行，还需要将其与相应的元素动作绑定到一起。

所谓绑定，其实就是将页面元素的事件类型与其在收到该事件之后期望进行的操作联系到一起。例如经常提到的“当我们单击这个按钮的时候，就会执行某些动作”，让这里的“单击”动作与“执行某些动作”连接到一起的操作就是绑定了。

绑定事件的函数

该函数将为调用它的每个匹配元素的特定事件绑定一个事件处理函数。它最多可以有三个参数，其中事件类型和处理函数为必选参数。

//绑定事件的函数 
$(selector).bind('事件类型',function(){
      处理代码
})       
//另一种写法
$(selector).事件名(function(){
     处理代码
})

函数名	bind(type,[data],fn)
作用	为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数
返回值	Object
参数	type(String)：事件类型 data (Object)：(可选)作为event.data属性值传递给事件对象的额外数据对象 fn ( Function)：绑定到每个匹配元素的事件上面的处理函数

例如：$("#testDiv4").bind("click", showMsg);

为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

jQuery事件处理函数的好处

添加的是多播事件委托. 。也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数。
统一了事件名称。
可以将对象行为全部用脚本控制。让html代码部分只注意"显示"逻辑，是将HTML的行为, 内容与样式切分干净.。其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式.。使用jQuery事件处理函数可以避免在HTML标签上直接添加事件。

反绑定事件

在对一个元素绑定了某种事件类型之后，可能在后来的某个时刻不再希望让该元素监听该类型的事件，此时就需要反绑定。所谓反绑定，就是解除与元素绑定的某种事件类型及处理函数。jQuery中的反绑定处理函数为unbind([type],[data])函数。

函数名	unbind([type],[data])
作用	bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。可以将用户用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数，则只删除该类型的绑定事件
返回值	Object
参数	type(String)：(可选)事件类型 data (Function)：(可选)要从每个匹配元素的事件中反绑定的事件处理函数

事件绑定和反绑定的实例

分析：点击提交则会把输入的用户名和密码提交至客户端，点击重置则会使其清空，为重置创建反绑定事件，则再次点击重置时不会清除内容。

<body style="text-align: center;">
    <div style="margin-top: 3px;">
        <label>
            用户名：
            <input type="text" id="username">
        </label>
        <br><br>
        <label>
            密码：
            <input type="password" id="pwd">
        </label>
        <br><br>
        <button type="button" id="btn_ok">提交</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" id="btn_reset">重置</button>
    </div>

    <script>
        $(function(){
            //给“重置”按钮绑定click事件
            $('#btn_reset').bind('click',function(){
                $('#username').val('')  //设置id为username的按钮的值为空
                $('#pwd').val('')
            })
            //给“提交”按钮绑定click事件
            $('#btn_ok').bind('click',function(){
                var n = $('#username').val()  //获取id为username的按钮的值
                var p = $('#pwd').val()
                console.log("用户名："+n)
                console.log("密码："+p)
            })
            //取消“重置”按钮的click事件
            $('#btn_reset').unbind('click')
        })
    </script>
</body>

一次性的事件绑定

一次性的事件绑定，是指与元素绑定的事件只能被使用一次，也就是说在触发一次之后即便再执行该类型的事件也不会去执行对应的处理函数。

函数名	one(type,[data],fn)
作用	为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
返回值	Object
参数	type(String)：事件类型 data (Object)：（可选）作为event.data属性值传递给事件对象的额外数据对象 fn ( Function)：绑定到每个匹配元素的事件上面的处理函数
实例	当所有段落被第一次点击的时候，显示所有其文本: $("p").one("click", function(){ alert( $(this).text() ); });

模仿鼠标悬停事件

$(selector).hover(over,out)

over：回调函数，表示鼠标悬停时调用的函数

out：回调函数，表示鼠标离开时调用的函数

实例：当鼠标放在一张图片上时显示另一张图片，移开后显示原图片

<body>
    <img src="../images/5.jpg" width="300" height="300">
    <script>
        $(function(){
            $('img').hover(function(evenr){
                $('img').attr('src','../images/3.jpg')
                console.log(event.type)
            },function(){
                $('img').attr('src','../images/5.jpg')
                console.log(event.type)
            })

        })
    </script>
</body>

jQuery事件对象

jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入。

例如 $(selector).bind('click',function(event){ -->'event'代表jQuery的事件对象
处理代码
})

(1)type：事件类型

(2)target：事件对象，获取事件触发者DOM对象

(3)pageX、pageY：在鼠标事件中鼠标相对于页面原点的x、y坐标

以上是关于jQuery事件绑定与反绑定，模仿鼠标悬停，事件对象的主要内容，如果未能解决你的问题，请参考以下文章