事件的绑定与移除

Posted 2020-12-29 yuyujuan

事件的绑定

在jQuery中，可以使用bind()方法来对元素进行特定事件的绑定，该方法接受三个参数：第一个参数是事件类型：blur、focus、click等，也可以是自定义名称；第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个参数则是用来绑定的处理函数。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click",function(){
             $(‘body‘).append("<p>我的绑定函数</p>");
       })
    })
</script>

但是，在事件操作过程中，我们经常采用简写的方式为元素绑定事件。

<button id="btn">点击我</button>

<script type="text/javascript">

　　$(function(){

　　　　$(‘#btn‘).click(function(){

　　　　　　$(‘body‘).append("<p>我的绑定函数</p>");

　　　　})

　　})

</script>

有的时候，我们还可以根据需要，为同一个元素绑定多个事件。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click", function(){
                     $(‘body‘).append("<p>我的绑定函数1</p>");
              }).bind("click", function(){
                     $(‘body‘).append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $(‘body‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

当我们点击按钮的时候，会依次触发绑定的三个事件：

事件移除

 在jQuery中，使用unbind()方法进行事件的移除，该方法接收两个参数：事件类型和要移除的函数。

• 如果没有传入参数，则删除所有绑定的事件
• 如果提供了事件类型作为参数，则只删除该类型的绑定事件
• 如果把在绑定时传递额处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除

我们将上面绑定多个事件的代码进行修改

<button id="btn">点击我</button>
<div id="test"></div>
<button id="del">删除事件</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click", myFun1 = function(){
                     $(‘#test‘).append("<p>我的绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(‘#test‘).append("<p>我的绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                       $(‘#test‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

当unbind()没有传入参数时：

$(‘#del‘).click(function(){
      $(‘#btn‘).unbind();
});

此时表示移除所有的绑定事件，当先点击删除事件按钮再点击上面的按钮时，页面不会有任何变化，因为所有的事件均被移除。

当unbind()只有一个参数的时候：

$(‘#del‘).click(function(){
     $(‘#btn‘).unbind("click");
});

此时表示只移除匹配元素的单击事件，因为上面绑定的多个事件均为单击事件，所以看到的效果和上面的是一样的。

当unbind()接收两个参数时：

$(‘#del‘).click(function(){
      $(‘#btn‘).unbind("click",myFun2);
});

此时表示只移除事件处理函数名为“myFun2”的单击事件，当先点击删除事件，在点击上面的按钮时，会出现下面的变化：

one()

 有时候，我们为某些元素绑定事件时，只希望这些事件执行一次就立即被移除，针对这种情况，jQuery提供了一种简写的方法：one()方法，该方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。该方法的结构和使用语法同bind()方法一样，这里就不再赘述了。

为了演示该方法，我们依旧将上面的例子进行改造：

<button id="btn">点击我</button>
<div id="test"></div>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).one("click", function(){
                     $(‘#test‘).append("<p>我的绑定函数1</p>");
              }).one("click", function(){
                     $(‘#test‘).append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $(‘#test‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

上面，我们为元素绑定了三个单击事件，其中有两个是只执行一次就会被立即移除的，所以，当我们第一次点击按钮时，三个事件都会触发，随后，前面两个事件就会被移除，第二次再点击按钮时，就只触发最后一个事件了。