原生JS及jQuery中事件委托的写法

原生JS及jQuery中事件委托的写法

在绑定节点事件处理程序时遇到的问题：

• 每个 函数都是对象，都会占用内存；内存中的对象越多，性能就越差。

• 其次，必须事先指定所有事件处理程 序而导致的 DOM访问次数，会延迟整个页面的交互就绪时间。

采用事件委托的优点:

1. document 对象很快就可以访问，而且可以在页面生命周期的任何时点上为它添加事件处理程序 （无需等待 DOMContentLoaded 或 load 事件）。换句话说，只要可单击的元素呈现在页面上， 就可以立即具备适当的功能。
2. 在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少， 所花的时间也更少。
3. 整个页面占用的内存空间更少，能够提升整体性能。
4. 绑定事件后,即使目标元素是以后再添加进来的也有效。

适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress等。

下面以给每个li 元素绑定click事件为例：

1 <ul class="container">
2     <li class="item">li-1</li>
3     <li class="item">li-2</li>
4     <li class="item">li-3</li>
5     <li class="item">li-4</li>
6     <li class="item">li-5</li>
7     <li class="item">li-6</li>
8 </ul>

原生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 });

   

到此完结。

posted on 2018-04-07 13:23  Jeffid 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jeffid/p/8733041.html