jQuery 移除事件的方法

(编辑:jimmy 日期: 2024/10/31 浏览:2)

在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件。

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

<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>

jQuery 移除事件的方法

当单击按钮后,会出现如上图所示的效果。

1. 移除按钮元素上所有注册的事件

添加一个移除事件的按钮。然后为按钮绑定一个事件,代码如下:

<script type="text/javascript">
  $(function(){
    $('#btn').bind("click", function(){
           $('#test').append("<p>我的绑定函数1</p>");
       }).bind("click", function(){
           $('#test').append("<p>我的绑定函数2</p>");
       }).bind("click", function(){
           $('#test').append("<p>我的绑定函数3</p>");
       });
    $('#delAll').click(function(){
       $('#btn').unbind("click");
    });
  })
</script>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
</body>

因为元素绑定的都是 click 事件,所以不写参数也可以达到同样的目的。

$('#delAll').click(function(){
  $('#btn').unbind();
});

下面来看看 unbind() 方法的语法结构:unbind([type] , [data]);

第1个参数是事件类型,第2个参数是将要移除的函数,具体说明如下。

(1) 如果没有参数,则删除所有绑定的事件。

(2) 如果提供了事件类型作为参数,则只删除该类型的绑定事件。

(3) 如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除。

2. 移除<button>元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量。然后就可以单独删除某一个事件了, jQuery 代码如下:

<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>");
       });
    $('#delTwo').click(function(){
       $('#btn').unbind("click",myFun2);
    });
  })
</script>

<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>
</body>

当单击“删除第二个事件”按钮后,再次单击“点击我”按钮,显示下图所示的效果。

jQuery 移除事件的方法

另外,对于只需要触发一次,随后就要立即解除绑定的情况,jQuery 提供了一种简写方法——one() 方法。 one() 方法可以为元素绑定处理函数。当处理函数触发一次后,立即被删除。即在每个对象上,事件处理函数只会被执行一次。

one() 方法的结构与 bind() 方法类似,使用方法也与 bind() 方法相同,其语法结构如下:one( type, [data], fn );

示例代码如下:

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

<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>

使用one() 方法为<button>元素绑定单击事件后,只在用户第1次单击按钮时,处理函数才执行,之后的单击毫无作用。

以上就是jQuery 移除事件的方法的详细内容,更多关于jQuery 移除事件的资料请关注其它相关文章!

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。