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 相关文章推荐
jquery可见性过滤选择器使用示例
Jun 24 Javascript
alert中断settimeout计时功能
Jul 26 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
javascript实现连续赋值
Aug 10 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
JS原生实现轮播图的几种方法
Mar 23 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中strtotime函数使用方法分享
2012/01/10 PHP
php selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
js实现日历的简单算法
2017/01/24 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
原生js实现淘宝放大镜效果
2020/10/28 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vue框架中props的typescript用法详解
2020/02/17 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
工作年限证明模板
2014/11/01 职场文书
春风化雨观后感
2015/06/11 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
入党申请书怎么写?
2019/06/11 职场文书
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS