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 相关文章推荐
javascript 多级checkbox选择效果
Aug 20 Javascript
页面中js执行顺序
Nov 09 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
javascript断点调试心得分享
Apr 23 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
原生js实现五子棋游戏
May 28 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+mysql留言本源码
2009/11/11 PHP
php错误级别的设置方法
2013/06/17 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
试用php中oci8扩展
2015/06/18 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
javascript新手语法小结
2008/06/15 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python 串行执行和并行执行实例
2020/04/30 Python
python 下载文件的多种方法汇总
2020/11/17 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
党校培训自我鉴定
2014/02/01 职场文书
教师节商场活动方案
2014/02/13 职场文书
环境科学专业求职信
2014/08/04 职场文书
银行催款通知书
2015/04/17 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python