javascript - Vanilla JavaScript 事件委托(delegate)

Question

在 vanilla js 中进行事件委托(delegate)的最佳(最快/正确)方式是什么？

例如，如果我在 jQuery 中有这个:

$('#main').on('click', '.focused', function(){
    settingsPanel();
});

我怎样才能将它翻译成 vanilla js？也许用 .addEventListener()

我能想到的方法是:

document.getElementById('main').addEventListener('click', dothis);
function dothis(){
    // now in jQuery
    $(this).children().each(function(){
         if($(this).is('.focused') settingsPanel();
    }); 
 }

但这似乎效率低下，尤其是当 #main 有很多 child 时。

那么这是正确的方法吗？

document.getElementById('main').addEventListener('click', doThis);
function doThis(event){
    if($(event.target).is('.focused') || $(event.target).parents().is('.focused') settingsPanel();
}

Answer 1

I've come up with a simple solution 这似乎工作得相当好(尽管有旧版 IE 支持)。在这里，我们扩展了 EventTarget 的原型(prototype)以提供一个 delegateEventListener 方法，它使用以下语法工作:

EventTarget.delegateEventListener(string event, string toFind, function fn)

我创建了一个相当复杂的 fiddle 来演示它的实际效果，我们将所有事件委托(delegate)给绿色元素。停止传播继续有效，您可以通过 this(与 jQuery 一样)访问应该是 event.currentTarget 的内容。

这里是完整的解决方案:

(function(document, EventTarget) {
  var elementProto = window.Element.prototype,
      matchesFn = elementProto.matches;

  /* Check various vendor-prefixed versions of Element.matches */
  if(!matchesFn) {
    ['webkit', 'ms', 'moz'].some(function(prefix) {
      var prefixedFn = prefix + 'MatchesSelector';
      if(elementProto.hasOwnProperty(prefixedFn)) {
        matchesFn = elementProto[prefixedFn];
        return true;
      }
    });
  }

  /* Traverse DOM from event target up to parent, searching for selector */
  function passedThrough(event, selector, stopAt) {
    var currentNode = event.target;

    while(true) {
      if(matchesFn.call(currentNode, selector)) {
        return currentNode;
      }
      else if(currentNode != stopAt && currentNode != document.body) {
        currentNode = currentNode.parentNode;
      }
      else {
        return false;
      }
    }
  }

  /* Extend the EventTarget prototype to add a delegateEventListener() event */
  EventTarget.prototype.delegateEventListener = function(eName, toFind, fn) {
    this.addEventListener(eName, function(event) {
      var found = passedThrough(event, toFind, event.currentTarget);

      if(found) {
        // Execute the callback with the context set to the found element
        // jQuery goes way further, it even has it's own event object
        fn.call(found, event);
      }
    });
  };

}(window.document, window.EventTarget || window.Element));