首页 > 代码库 > 简述:js事件代理的7种方法
简述:js事件代理的7种方法
以为buttton元素绑定单击事件,来探讨事件绑定的几种方式:
1.最原始的方法:在button元素里面添加onclick事件,代码如下:
<button onclick=function(){}></button>
这种方法虽然使用简单,但是有一个缺点就是:页面显示和事件处理混在一起,不符合网页开发设计的理念。
2.事件监听(addEventListener)
获取button元素,绑定事件监听 .addEventListener(‘click‘,fn,[true/false]);
注:最后一个参数表示是否使用事件捕获,默认为false
3.jQuery的四种办法
3.1 直接绑定.click()事件,代码如下:
$("button") .click( function() { $("p").slideToggle(); })
3.2 使用.bind()方法
$(‘button‘).bind(‘click‘, [data], function(){});
注:此方法可为button元素绑定一个或多个事件处理程序,以及当事件发生时运行的函数。
3.3 事件代理的3种方法
当一个元素的多个子元素发生click事件或者有新生成的子元素发生click事件时,可以用事件代理方法,目前用的比较多的有.live(), .delegate()和.on()方法
3.31 .live()为当前或未来的匹配元素添加一个或多个事件处理器
$("button").live(‘click‘, [data], function(){})
.live()为button元素附加一个事件处理函数,即使这个元素是以后再添加进来的
注:.live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。和.bind()的优势是支持动态数据。
3.32 .delegate(ChildSelector‘, event, [data], fn )
注:与.live()相比较,.delegate()
3.33 .on(‘click‘, selector, [data], fn)
.on()方法是最新1.9版本,整合了之前几种方式的新的事件绑定方法
简述:js事件代理的7种方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。