在绑定节点事件处理程序时遇到的问题:
每个 函数都是对象,都会占用内存;内存中的对象越多,性能就越差。
其次,必须事先指定所有事件处理程 序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间。
采用事件委托的优点:
适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。
下面以给每个li 元素绑定click事件为例:
1
原生JS事件委托:
1 var _li = document.getElementsByTagName('li'),
2 _ul = document.getElementsByTagName('ul')[0];
3
4
5 /* 事件委托绑定事件 */
6 _ul.onclick = function (e) {
7 var _it = e.target;
8 if (_it.tagName == 'LI') {
9 // 能进里说明当前点击的是LI元素
10 console.log(_it.innerHTML);
11 }
12 }
jQuery事件委托:
on()方法
1 /*
2 * .on()方法,jQuery 1.7新增,提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live().
3 * */
4 $('ul').on('click', 'li', function (e) {
5 console.log(e.target.innerHTML);
6 });
delegate()方法
1 $('ul').delegate('li', 'click', function (e) {
2 console.log(e.target.innerHTML);
3 });
live()方法
1 /*
2 * 从 jQuery 1.7 开始,不再建议使用 .live() 方法。请使用 .on() 来添加事件处理。使用旧版本的用户,应该优先使用 .delegate() 来替代 .live()。
3 * */
4 $('li').live('click', function (e) {
5 console.log(e.target.innerHTML);
6 });
到此完结。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章