事件的绑定与移除

Posted yuyujuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件的绑定与移除相关的知识,希望对你有一定的参考价值。

事件的绑定

在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>

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

技术分享图片

以上是关于事件的绑定与移除的主要内容,如果未能解决你的问题,请参考以下文章

js添加与移除事件

添加事件与移除事件

vue.js怎样移除绑定的点击事件

Jquery挂事件与移除事件

jQuery绑定事物处理器

javascript 屏幕取词与移除取词