关于javascript:JavaScript-事件委托详解

44次阅读

共计 6762 个字符，预计需要花费 17 分钟才能阅读完成。

基本概念

事件委托，艰深地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素；

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到须要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，而后在外层元素下来执行函数。

举个例子，比方一个宿舍的同学同时快递到了，一种办法就是他们都傻傻地一个个去支付，还有一种办法就是把这件事件委托给宿舍长，让一个人进来拿好所有快递，而后再依据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是须要响应事件的 DOM 元素，而进来对立支付快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，依照收件人散发快递的过程就是在事件执行中，须要判断以后响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件冒泡

后面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？

在 document.addEventListener 的时候咱们能够设置事件模型：事件冒泡、事件捕捉，一般来说都是用事件冒泡的模型；

如上图所示，事件模型是指分为三个阶段：

  • 捕捉阶段：在事件冒泡的模型中，捕捉阶段不会响应任何事件；
  • 指标阶段：指标阶段就是指事件响应到触发事件的最底层元素上；
  • 冒泡阶段：冒泡阶段就是事件的触发响应会从最底层指标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所须要响应的事件绑定到外层；### 事件

委托的长处

1. 缩小内存耗费

试想一下，若果咱们有一个列表，列表之中有大量的列表项，咱们须要在点击列表项的时候响应一个事件；

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表两头还有未知数个 li

如果给每个列表项一一都绑定一个函数，那对于内存耗费是十分大的，效率上须要耗费很多性能；

因而，比拟好的办法就是把这个点击事件绑定到他的父层，也就是 ul 上，而后在执行事件的时候再去匹配判断指标元素；

所以事件委托能够缩小大量的内存耗费，节约效率。

2. 动静绑定事件

比方上述的例子中列表项就几个，咱们给每个列表项都绑定了事件；

在很多时候，咱们须要通过 AJAX 或者用户操作动静的减少或者去除列表项元素，那么在每一次扭转的时候都须要从新给新增的元素绑定事件，给行将删去的元素解绑事件；

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和指标元素的增减是没有关系的，执行到指标元素是在真正响应执行事件函数的过程中去匹配的；

所以应用事件在动静绑定事件的状况下是能够缩小很多反复工作的。

jQuery 中的事件委托

jQuery 中的事件委托置信很多人都用过，它次要这几种办法来实现：

  • **$.on**: 根本用法: $(‘.parent’).on(‘click’, ‘a’, function () {console.log(‘click event on tag a’); })，它是 .parent 元素之下的 a 元素的事件代理到 $(‘.parent’) 之上，只有在这个元素上有点击事件，就会主动寻找到 .parent 元素下的 a 元素，而后响应事件；
  • **$.delegate**: 根本用法: $(‘.parent’).delegate(‘a’, ‘click’, function () {console.log(‘click event on tag a’); })，同上，并且还有绝对应的 $.delegate 来删除代理的事件；
  • **$.live**: 根本应用办法: $(‘a’, $(‘.parent’)).live(‘click’, function () {console.log(‘click event on tag a’); })，同上，然而如果没有传入父层元素 $(.parent)，那事件会默认委托到 $(document) 上；(已破除)

实现性能

根本实现

比方咱们有这样的一个 HTML 片段：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表两头还有未知数个 li

咱们来实现把 #list 下的 li 元素的事件代理委托到它的父层元素也就是 #list 上：

// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性解决
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配指标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {console.log('the content is:', target.innerHTML);
  }
});

在上述代码中，target 元素则是在 #list 元素之下具体被点击的元素，而后通过判断 target 的一些属性（比方：nodeName，id 等等）能够更准确地匹配到某一类 #list li 元素之上；

应用 Element.matches 准确匹配

如果扭转下 HTML 成：

<ul id="list">
  <li className="class-1">item 1</li>
  <li>item 2</li>
  <li className="class-1">item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 代表两头还有未知数个 li

这里，咱们想把 #list 元素下的 li 元素（并且它的 class 为 class-1）的点击事件委托代理到 #list 之上；

如果通过上述的办法咱们还须要在 if (target.nodeName.toLocaleLowerCase === 'li') 判断之中在退出一个判断 target.nodeName.className === 'class-1'；

然而如果想像 CSS 抉择其般做更加灵便的匹配的话，下面的判断未免就太多了，并且很难做到灵活性，这里能够应用 Element.matches API 来匹配；

Element.matches API 的根本应用办法: Element.matches(selectorString)，selectorString 既是 CSS 那样的选择器规定，比方本例中能够应用 target.matches(‘li.class-1’)，他会返回一个布尔值，如果 target 元素是标签 li 并且它的类是 class-1，那么就会返回 true，否则返回 false；

当然它的兼容性还有一些问题，须要 IE9 及以上的现代化浏览器版本；

咱们能够应用 Polyfill 来解决兼容性上的问题：

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;            
    };
}

加上 Element.matches 之后就能够来实现咱们的需要了：

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;            
    };
}
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性解决
  var event = e || window.event;
  var target = event.target || event.srcElement;
  if (target.matches('li.class-1')) {console.log('the content is:', target.innerHTML);
  }
});

函数封装

在应答更多场景上咱们能够把事件代理的性能封装成一个专用函数，这样就能够反复利用了。
联合下面的例子来实现一个函数 eventDelegate，它承受四个参数：

  • [String] 一个选择器字符串用于过滤须要实现代理的父层元素，既事件须要被真正绑定之上；
  • [String] 一个选择器字符串用于过滤触发事件的选择器元素的后辈，既咱们须要被代理事件的元素；
  • [String] 一个或多个用空格分隔的事件类型和可选的命名空间，如 click 或 keydown.click ;
  • [Function] 须要代理事件响应的函数；

** 这里就有几个关键点：

  • 对于父层代理的元素可能有多个，须要一一绑定事件；
  • 对于绑定的事件类型可能有多个，须要一一绑定事件；
  • 在解决匹配被代理的元素之中须要思考到兼容性问题；
  • 在执行所绑定的函数的时候须要传入正确的参数以及思考到 this 的问题；
function eventDelegate (parentSelector, targetSelector, events, foo) {
  // 触发执行的函数
  function triFunction (e) {
    // 兼容性解决
    var event = e || window.event;
    var target = event.target || event.srcElement;
    // 解决 matches 的兼容性
    if (!Element.prototype.matches) {
      Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
          while (--i >= 0 && matches.item(i) !== this) {}
          return i > -1;            
        };
    }
    // 判断是否匹配到咱们所须要的元素上
    if (target.matches(targetSelector)) {
      // 执行绑定的函数，留神 this
      foo.call(target, Array.prototype.slice.call(arguments));
    }
  }
  // 如果有多个事件的话须要全副一一绑定事件
  events.split('.').forEach(function (evt) {
    // 多个父层元素的话也须要一一绑定
    Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {$p.addEventListener(evt, triFunction);
    });
  });
}

优化

当被代理的元素不是指标元素的时候，既选择器 targetSelector 所指向的元素不是 event.target（事件指标阶段指向的元素）的时候，这时候就须要层层遍历 event.target 的 parentNode 去匹配 targetSelector 了，直到 parentSelector。

比方：

<ul id="list">
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
</ul>

还是把 li 的事件代理到 #list 之上，但这时候会发现 event.target 指向的是 li span，因而须要层层遍历外层元素去匹配，直到到代理事件的函数，咱们能够用 event.currentTarget 来获取到代理事件的函数；

残缺函数：

function eventDelegate (parentSelector, targetSelector, events, foo) {
  // 触发执行的函数
  function triFunction (e) {
    // 兼容性解决
    var event = e || window.event;

    // 获取到指标阶段指向的元素
    var target = event.target || event.srcElement;

    // 获取到代理事件的函数
    var currentTarget = event.currentTarget;

    // 解决 matches 的兼容性
    if (!Element.prototype.matches) {
      Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),
            i = matches.length;
          while (--i >= 0 && matches.item(i) !== this) {}
          return i > -1;            
        };
    }

    // 遍历外层并且匹配
    while (target !== currentTarget) {
      // 判断是否匹配到咱们所须要的元素上
      if (target.matches(targetSelector)) {
        var sTarget = target;
        // 执行绑定的函数，留神 this
        foo.call(sTarget, Array.prototype.slice.call(arguments))
      }

      target = target.parentNode;
    }
  }

  // 如果有多个事件的话须要全副一一绑定事件
  events.split('.').forEach(function (evt) {
    // 多个父层元素的话也须要一一绑定
    Array.prototype.slice.call(document.querySelectorAll(parentSelector)).forEach(function ($p) {$p.addEventListener(evt, triFunction);
    });
  });
}

应用函数：

eventDelegate('#list', 'li', 'click', function () {console.log(this); });

点击后能够看到 console 出了 #list li 元素对象；

局限性

当然，事件委托也是有肯定局限性的；

比方 focus、blur 之类的事件自身没有事件冒泡机制，所以无奈委托；

mousemove、mouseout 这样的事件，尽管有事件冒泡，然而只能一直通过地位去计算定位，对性能耗费高，因而也是不适宜于事件委托的；

文章有不对中央欢送斧正！

正文完
css
发表至： css
2021-04-09
 0
关于css:CSS-Houdini-Properties-Values-and-the-Paint-API
关于css:CSS揭密背景和边框特殊技巧
关于padding被计算在width中问题boxsizing相关
关于css:如何让更新状态的动画更丝滑