.on(),.delegate(),.bind()绑定事件的异同点
来源:互联网 发布:php方面的书籍 编辑:程序博客网 时间:2024/05/17 06:54
添加一个页面:
<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>实现点击按钮可以追加p元素,使用下面的方法绑定click事件
1、bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
$("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());})
2、delegate(selector,[type],[data],fn)
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
$("div").delegate("p", "click", function () { alert($(this).text());});
这种方式采用了事件委托的概念。不是直接为p元素绑定事件,而是为其父元素(或祖先元素也可)绑定事件,当在div内任意元素上点击时,事件会一层层从event target向上冒泡,直至到达你为其绑定事件的元素,如此例中的div元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。
这样就解决了用bind()方法的上面两个问题,不用再一个个地去为p元素绑定事件,也可以为动态添加进来的p元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。
这样,绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。
3、on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数。
$("div").on("click","p",function(){ alert($(this).text());})对应于bind()、delegate()和on()绑定方法,其移除事件的方法分别为:
$( "div p" ).unbind( "click", handler );$( "div" ).undelegate( "p", "click", handler );$( "div" ).off( "click", "p", handler );移除方法还可以不传入参数,移除所有的时间绑定
1.选择器匹配到的元素比较多时,不要用bind()迭代绑定
2.用id选择器时,可以用bind()
3.需要给动态添加的元素绑定时,用delegate()或者on()
4.用delegate()和on()方法,dom树不要太深
5.尽量使用on()
- .on(),.delegate(),.bind()绑定事件的异同点
- jq中绑定事件bind(),live(),delegate(),on()的优缺点
- jQuery事件绑定bind、live、delegate和on的区别
- bind,live,delegate,on事件绑定
- JQ绑定事件 bind(),on(),live(),delegate()
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- jQuery事件:bind、delegate、on的区别
- Jquery之事件绑定(bind(),live(),delegate(),on())
- 事件绑定on()、bind()与delegate() 方法详解
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- jQuery事件绑定—on()、bind()与delegate() (赞)
- Jquery中的bind(),live(),delegate(),on()绑定事件方式
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- Jquery中的bind(),live(),delegate(),on()绑定事件方式
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
- jQuery事件绑定on()、bind()与delegate() 方法详解
- 移植µC/OS-Ⅱ
- 求子串个数(C语言)
- codebook 背景减除
- redis安装在centos6.5
- nodpad++注释快捷键
- .on(),.delegate(),.bind()绑定事件的异同点
- 【PM】【需求】项目管理-需求:管理软件需求分析过程
- BASE64加密解密
- 低版本xshell登录ssh提示密码错误
- Go 语言概述 ( 上 )
- 技术与技巧札记
- MFC总结(19) --- CStrig转换成十六进制数
- 外观模式
- openssl 证书操作命令