JavaScript 事件委託詳解 | 掘金技術徵文

時間  2019-11-24
標籤 javascript 事件 委託 詳解 技術 徵文 欄目 JavaScript 简体版
原文   原文鏈接

基本概念

事件委託，通俗地來說，就是把一個元素響應事件（click、keydown......）的函數委託到另外一個元素；javascript

通常來說，會把一個或者一組元素的事件委託到它的父層或者更外層元素上，真正綁定事件的是外層元素，當事件響應到須要綁定的元素上時，會經過事件冒泡機制從而觸發它的外層元素的綁定事件上，而後在外層元素上去執行函數；html

舉個例子，好比一個宿舍的同窗同時快遞到了，一種方法就是他們都傻傻地一個個去領取，還有一種方法就是把這件事情委託給宿舍長，讓一我的出去拿好全部快遞，而後再根據收件人一一分發給每一個宿舍同窗；java

在這裏，取快遞就是一個事件，每一個同窗指的是須要響應事件的 DOM 元素，而出去統一領取快遞的宿舍長就是代理的元素，因此真正綁定事件的是這個元素，按照收件人分發快遞的過程就是在事件執行中，須要判斷當前響應的事件應該匹配到被代理元素中的哪個或者哪幾個。node

事件冒泡

前面提到 DOM 中事件委託的實現是利用事件冒泡的機制，那麼事件冒泡是什麼呢？jquery

在 document.addEventListener 的時候咱們能夠設置事件模型：事件冒泡、事件捕獲，通常來講都是用事件冒泡的模型；web

如上圖所示，事件模型是指分爲三個階段：瀏覽器

  • 捕獲階段：在事件冒泡的模型中，捕獲階段不會響應任何事件；
  • 目標階段：目標階段就是指事件響應到觸發事件的最底層元素上；
  • 冒泡階段：冒泡階段就是事件的觸發響應會從最底層目標一層層地向外到最外層（根節點），事件代理便是利用事件冒泡的機制把裏層所須要響應的事件綁定到外層；

事件委託的優勢

1. 減小內存消耗

試想一下，若果咱們有一個列表，列表之中有大量的列表項，咱們須要在點擊列表項的時候響應一個事件；函數

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 表明中間還有未知數個 li複製代碼

若是給每一個列表項一一都綁定一個函數，那對於內存消耗是很是大的，效率上須要消耗不少性能；post

所以，比較好的方法就是把這個點擊事件綁定到他的父層，也就是 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 這樣的事件，雖然有事件冒泡，可是隻能不斷經過位置去計算定位，對性能消耗高，所以也是不適合於事件委託的；

👇👇👇 更多的文章歡迎關注個人博客
qiutc.me/

👇👇👇 博客中的原文
qiutc.me/post/event-…

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程