深入理解jQuery之事件移除


Posted in Javascript onJune 02, 2016

有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理。比如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之事件移除就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载script文件的两种方法
Aug 15 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
深入理解JQuery循环绑定事件
Jun 02 #Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 #Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 #Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 #Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 #Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 #Javascript
深入理解jQuery事件绑定
Jun 02 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
twig里使用js变量的方法
2016/02/05 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
Python 解析XML文件
2009/04/15 Python
python基础教程之字典操作详解
2014/03/25 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
高校教师自荐信范文
2014/03/13 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
2014年采购员工作总结
2014/11/18 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
画展邀请函
2015/01/31 职场文书
环卫工人慰问信
2015/02/15 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
学历证明样本
2015/06/16 职场文书
观后感格式
2015/06/19 职场文书
运动会加油稿30字
2015/07/21 职场文书