jQuery事件绑定on()、bind()与delegate() 方法详解


Posted in Javascript onJune 03, 2015

啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结。

之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的。

jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用。所以这里我们主要就看下以下三个方法:bind()、delegate()、on()

我们准备一个html页面,用于各种类型事件绑定的测试。

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</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>
$("#btn").click(function(){
  $("div").append("<p>这是一个新的p元素</p>");
});
</script>

</body>
</html>

一个简单的页面,放置了一个div,div里面若干个p元素和一个按钮,点击按钮可以追加p元素。我们下面将对页面上的p元素绑定click事件。

bind()

用法

$("div p").bind("click", function () {

    alert($(this).text());

})

这样就为所有div里的p元素都绑定了click事件,响应为弹出其内容。绑定很简单快捷,但是这里有两个问题:
第一个问题,这里用了隐式迭代的方法,如果匹配到的元素特别多的时候,比如如果我在div里放了50个p元素,就得执行绑定50次。对于大量元素来说,影响到了性能。
但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
第二个问题,对于尚未存在的元素,无法绑定。点击页面上的按钮,将动态添加一个p元素,点击这个p元素,会发现没有动作响应。
用delegate方法就可以解决这两个问题了。

另外提一下,bind()方法还有一种简写方式,上面的代码还可以换成:

$("div p").click(function () {

    alert($(this).text());

})

delegate()

用法

$("div").delegate("p", "click", function () {

    alert($(this).text());

});

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

这样就解决了用bind()方法的上面两个问题,不用再一个个地去为p元素绑定事件,也可以为动态添加进来的p元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。

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

on()

on()其实是将以前的绑定事件方法作了统一,查看jQuery无压缩的源码(我这里看的版本是1.11.3),可以发现无论bind()还是delegate()其实都是通过on()方法实现的,只是参数不同罢了。

 

 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 );

    }

上面的例子中,用on()可以作如下绑定:

$("div").on("click","p",function(){

    alert($(this).text());

})

官方文档建议:

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

尽量使用on()来绑定事件。

移除事件

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

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

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

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

除了像上面这样移除指定的事件绑定之外,还可以不传入参数,移除所有事件绑定,这里就不一一列出了,jQuery的官方文档写得非常详细。

总结

1.选择器匹配到的元素比较多时,不要用bind()迭代绑定

2.用id选择器时,可以用bind()

3.需要给动态添加的元素绑定时,用delegate()或者on()

4.用delegate()和on()方法,dom树不要太深

5.尽量使用on()

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
React学习笔记之事件处理(二)
Jul 02 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 #Javascript
浅谈javascript中基本包装类型
Jun 03 #Javascript
js中函数声明与函数表达式
Jun 03 #Javascript
JavaScript基本语法讲解
Jun 03 #Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 #Javascript
ECMAScript中函数function类型
Jun 03 #Javascript
JavaScript运算符小结
Jun 03 #Javascript
You might like
php文件上传的两种实现方法
2016/04/04 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python Nose框架编写测试用例方法
2017/10/26 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
python读取xml文件方法解析
2020/08/04 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
电视节目策划方案
2014/05/16 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
公证委托书格式
2014/09/13 职场文书
践行三严三实心得体会
2014/10/13 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
给老婆道歉的话
2015/01/20 职场文书
排球赛新闻稿
2015/07/17 职场文书
2015选调生工作总结
2015/07/24 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS