深入理解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 相关文章推荐
js动态移动滚动条至底部示例代码
Apr 24 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
使用Web Uploader实现多文件上传
Jun 08 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
javascript 节点遍历函数
2010/03/28 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
JS实现队列与堆栈的方法
2016/04/21 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JavaScript实现分页效果
2017/03/28 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
学习python可以干什么
2019/02/26 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2014年电厂工作总结
2014/12/04 职场文书
信息技术研修心得体会
2016/01/08 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏