jQuery事件绑定方法学习总结(推荐)


Posted in Javascript onNovember 21, 2016

对于jQuery中的事件绑定方法,主要有on()、bind()、delegate()、live()等这几个方法。之前都是之前拿过来用,也知道有这么几个方法,但是不清楚这几个事件绑定方法之间的区别。平时用的最多的是on方法,今天打算整理一下。

bind方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>bind事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
 alert($(this).text());
});
</script>
</body>
</html>

这种绑定事件的方式缺点:

当页面上p元素特别多的时候,会导致页面上存在大量的事件处理程序,导致页面性能差;

对于动态生成的新元素,不具有点击事件。

对于这两个缺点,我们可以通过下面即将要介绍的delegate方法来解决。

delegate方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
 $("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
 alert($(this).text());
});
</script>
</body>
</html>

上面的例子中我们使用事件委托的原理,利用delegate来绑定事件。

不直接为p元素绑定事件,而是为其父元素(或祖先元素)绑定事件,当在div内任意元素上点击时,事件会一层层从event target(目标元素)向上冒泡,直至到达你为其绑定事件的元素,如此例中的div元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。

这样就解决了用bind()方法的上面两个问题,不用再一个个地去为p元素绑定事件,有效减少了页面上事件处理程序数量,也可以为动态添加进来的p元素绑定事件。

这种方式也是有缺陷的:这样绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。

bind和delegate源码实现

bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
 },
 unbind: function( types, fn ) {
  return this.off( types, null, fn );
 },

 delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
 },
 undelegate: function( selector, types, fn ) {
  // ( namespace ) or ( selector, types [, fn] )
  return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
 }

从源码中可以看出,无论bind()还是delegate()其实都是通过on()方法实现的,只是参数不同罢了。

on方法

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>jQuery事件绑定</title>
</head>
<body>
<div>
 <button id="btn">添加新的p元素</button>
 <p>第一个p元素</p>
 <p>第二个p元素</p>
 <p>第三个p元素</p>
 <p>第四个p元素</p>
 <p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
 alert($(this).text());
});
</script>
</body>
</html>

移除事件

对于bind()、delegate()和on()绑定方法,其移除事件的方法分别为:

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

小结

•选择器匹配到的元素比较多时,不要用bind()迭代绑定;
•用id选择器时,可以用bind();
•需要给动态添加的元素绑定时,用delegate()或者on();
•用delegate()和on()方法,dom树不要太深;
•尽量使用on()。

以上这篇jQuery事件绑定方法学习总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
Javascript节点关系实例分析
May 15 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
js学习之----深入理解闭包
Nov 21 #Javascript
浅谈js原生拖放
Nov 21 #Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 #Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 #Javascript
JS中判断null的方法分析
Nov 21 #Javascript
javascript 利用arguments实现可变长参数
Nov 21 #Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 #Javascript
You might like
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
Git命令之分支详解
2021/03/02 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
python调用webservice接口的实现
2019/07/12 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
python3的pip路径在哪
2020/06/23 Python
详解python datetime模块
2020/08/17 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
农村面貌改造提升实施方案
2014/03/18 职场文书
会议欢迎标语
2014/06/30 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
python中os.path.join()函数实例用法
2021/05/26 Python
Python数据分析之pandas读取数据
2021/06/02 Python
vue3中provide && inject的使用
2021/07/01 Vue.js