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 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 Javascript
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验证码(支持中文)
2007/02/14 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP类型约束用法示例
2016/09/28 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python跳出多重循环的方法示例
2019/07/03 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
公司同意接收函
2014/01/13 职场文书
安全生产计划书
2014/05/04 职场文书
工作岗位说明书模板
2014/05/09 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
五好家庭事迹材料
2014/12/20 职场文书
安全教育日主题班会
2015/08/13 职场文书