深入理解jQuery之事件移除

有时候事件执行完了，想取消事件的效果可以通过一定的办法来处理。比如bind()方法，可以通过unbind()方法来移除事件的效果。

比如下面的一个案例：

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

html部分：

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

当点击按钮btn时，触发了三个点击事件，这里的append()方法，向div层中传递了三个段落内容。

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。它与html()方法还是不同的，html()方法是改变整个元素中的内容，而不是向元素结尾插入内容。text()方法与html() 方法类似，但区别在于html()方法中可以写入html的代码，而且可以被正确的解析，而text() 只能当html代码为正常的字符串。

这里每次点击，都会执行一次事件，想div层末尾添加段落。

下面的代码是取消事件效果的，可以通过删除事件，使点击效果失效：

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

$('#btn').unbind("click");这句代码的作用就是取消元素btn下的click事件。它不仅仅对于bind()方法有效，它对于click()方法同样有效。从某种角度上讲，bind("click",function(){})与click(function(){})是等价的。

还可以针对具体的方法，删除特定的事件。

下面的代码可以参考：

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

unbind()方法的第二个参数是事件对应得执行函数的名字，这样执行完后，只有myFun2这个事件被删除了，其他两个click事件正常执行。

还有一种跟bind()方法类似的方法one()，区别大概就是one()方法只执行一次。

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

代码如下：

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

点击后，只执行一次。再次点击不会触发效果。这就是one方法。

以上这篇深入理解jQuery之事件移除就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • jquery利用命名空间移除绑定事件的方法

    jquery利用命名空间移除绑定事件的方法

    本文实例讲述了jquery利用命名空间移除绑定事件的方法.分享给大家供大家参考.具体分析如下: 最近研究jquery,发现了一个简单移除绑定事件的方法,命名空间. 例子很简单. 这里我绑定了三个事件,分别是click,mouseover和dblclick事件 其中click和mouseover事件我加入了命名空间,而dblclick没有加入命名空间. 利用一个button移除了绑定的事件. 这样避免了重复的使用bind和unbind方法,让你的代码看起来更简洁明了. 复制代码 代码如下: <sc

  • 浅析jquery unbind()方法移除元素绑定的事件

    unbind()方法可以移除元素已绑定的事件,它的调用格式如下: $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称. 语法  unbind()函数主要有以下两种形式的用法: 用法一: jQueryObject.unbind( [ events [, handler ]] ) 移除当前匹配元素的events事件绑定的事件处理函数handler. 用法二: jQueryObject.unb

  • jQuery移除元素自动解绑事件实现思路及代码

    世界本该如此! 所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存.也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡.因此,需要我们自己对要删除的元素进行事件解绑. 实现思路 用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法.我们可以对此三个方法进行进一步的封装,我们会在

  • JQuery中DOM实现事件移除的方法

    本文实例讲述了JQuery中DOM实现事件移除的方法.分享给大家供大家参考.具体如下: 可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件.假设网页上有一个<button>元素,使用以下代码为该元素绑定多个相同的事件. $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind("c

  • 深入理解jQuery之事件移除

    有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()方法,可以通过unbind()方法来移除事件的效果. 比如下面的一个案例: <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的绑定函数1</p>"); }).bind(&qu

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • 深入理解jQuery之防止冒泡事件

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> 对应的jQuery代码如下: <script type="text/

  • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解

    本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

  • 深入理解jQuery中的事件冒泡

    深入理解jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="

  • 深入理解JQuery循环绑定事件

    深入理解JQuery循环绑定事件 <html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script typ

  • 详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值: jQuery 参数: type (String) : (可选) 事件类型 data (Function): (可选)

随机推荐