我想出了一个简单的解决方案，它似乎工作得很好（尽管有旧版 IE 支持）。在这里，我们扩展了EventTarget的原型以提供一种delegateEventListener使用以下语法工作的方法：

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

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

这是完整的解决方案：

(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));

与其改变内置原型（这会导致代码脆弱并且经常会破坏事物），只需检查单击的元素是否具有.closest与您想要的选择器匹配的元素。如果是，请调用您要调用的函数。例如，要翻译

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

在 jQuery 之外，使用：

document.querySelector('#main').addEventListener('click', (e) => {
  if (e.target.closest('#main .focused')) {
    settingsPanel();
  }
});

除非内部选择器也可能作为父元素存在（这可能很不寻常），否则将内部选择器单独传递给.closest（例如，.closest('.focused')）就足够了。

使用这种模式时，为了保持紧凑，我经常将代码的主要部分放在提前返回的下方，例如：

document.querySelector('#main').addEventListener('click', (e) => {
  if (!e.target.matches('.focused')) {
    return;
  }
  // code of settingsPanel here, if it isn't too long
});

现场演示：

document.querySelector('#outer').addEventListener('click', (e) => {
  if (!e.target.closest('#inner')) {
    return;
  }
  console.log('vanilla');
});

$('#outer').on('click', '#inner', () => {
  console.log('jQuery');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
    inner
    <div id="nested">
      nested
    </div>
  </div>
</div>

我有一个类似的解决方案来实现事件委托。它使用的阵列的功能slice，reverse，filter和forEach。

• slice 将查询中的 NodeList 转换为数组，这必须在允许反转列表之前完成。
• reverse 反转数组（使最终的遍历开始尽可能靠近事件目标。
• filter检查哪些元素包含event.target.
• forEach只要处理程序不返回 ，就为过滤后的结果中的每个元素调用提供的处理程序false。

该函数返回创建的委托函数，这使得以后可以删除侦听器。请注意，本机event.stopPropagation()不会停止遍历validElements，因为冒泡阶段已经遍历到委托元素。

function delegateEventListener(element, eventType, childSelector, handler) {
    function delegate(event){
        var bubble;
        var validElements=[].slice.call(this.querySelectorAll(childSelector)).reverse().filter(function(matchedElement){
            return matchedElement.contains(event.target);
        });
        validElements.forEach(function(validElement){
            if(bubble===undefined||bubble!==false)bubble=handler.call(validElement,event);
        });
    }
    element.addEventListener(eventType,delegate);
    return delegate;
}

虽然不建议扩展原生原型，但可以将这个功能添加到原型中EventTarget（或Node在 IE 中）。这样做时，在函数内替换element为this并删除相应的参数 ( EventTarget.prototype.delegateEventListener = function(eventType, childSelector, handler){...})。