@MrGuru：因为这就是事件委托的工作方式。您必须查看元素层次结构中是否有任何节点与选择器匹配，从事件起源的元素开始，到绑定处理程序的元素停止。

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

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

我创建了一个相当复杂的 fiddle 来演示它的实际操作，其中我们委托绿色元素的所有事件。停止传播继续起作用，您可以访问应该 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));

我建议使用 window.Node 而不是 window.Element。文档本身继承自 Node，从而使其功能可以在 IE（没有 EventTarget）中运行。

无需改变内置原型（这会导致代码脆弱，并且经常会破坏某些功能），只需检查所点击的元素是否有与 .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.closest('.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>

如果 DOM 尚未加载，document.querySelector 将无法运行。这不完全是委托。

当然是 - 就像 OP 的 jQuery 代码 $('#main').on('click', '.focused', function(){ 将 #main 内部的点击委托给 #main 的点击监听器一样，我的代码也在做同样的事情。如果 #main 的子项是动态的（例如，如果 #main 是待办事项列表容器），则可以使用这种技术。如果 #main 本身可能不存在，那就是另一种情况，当然需要将事件委托给外部父级。

我的错……楼主的案例确实可行。我应该详细说明一下，因为我正在寻找与 Turbolinks 兼容的解决方案。它删除了除文档和窗口之外的所有内容。我最终只使用了带有完整选择器的 .matches，而没有像上一个示例那样在文档上使用 querySelector。

第二个代码片段使用了一个简单的 target.matches()，它与 ​​.closest() 不同，因为它要求事件直接在该元素上触发，而不是在其后代之一上触发。我猜这不是有意的。

我有一个类似的解决方案来实现事件委托。它利用数组函数 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){...} ）。

委托事件

当现有或动态元素（将来添加到 DOM 中）收到事件时需要执行某个函数时使用 事件委托
该策略是将事件监听器分配给已知的 静态父级 并遵循以下 规则 ：

• 使用 evt.target.closest(\'.dynamic\') 获取所需的动态子项
• 用于 evt.currentTarget 获取 #staticParent 父 委托人
• 用于 evt.target 获取 exact clicked Element （警告！这也可能是后代元素，不一定是那个 .dynamic ）

片段示例：

document.querySelector("#staticParent").addEventListener("click", (evt) => {

  const elChild = evt.target.closest(".dynamic");

  if ( !elChild ) return; // do nothing.

  console.log("Do something with elChild Element here");

});

具有动态元素的完整示例：

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// Delegated events
el("#staticParent").addEventListener("click", (evt) => {

  const elDelegator = evt.currentTarget;
  const elChild = evt.target.closest(".dynamicChild");
  const elTarget = evt.target;

  console.clear();
  console.log(`Clicked:
    currentTarget: ${elDelegator.tagName}
    target.closest: ${elChild?.tagName}
    target: ${elTarget.tagName}`)

  if (!elChild) return; // Do nothing.

  // Else, .dynamicChild is clicked! Do something:
  console.log("Yey! .dynamicChild is clicked!")
});

// Insert child element dynamically
setTimeout(() => {
  el("#staticParent").append(elNew("article", {
    className: "dynamicChild",
    innerHTML: `Click here!!! I'm added dynamically! <span>Some child icon</span>`
  }))
}, 1500);

#staticParent {
  border: 1px solid #aaa;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dynamicChild {
  background: #eee;
  padding: 1rem;
}

.dynamicChild span {
  background: gold;
  padding: 0.5rem;
}

<section id="staticParent">Click here or...</section>

直接事件

或者，你可以在创建时直接在子项上附加一个点击处理程序：

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Create new comment with Direct events:
const newComment = (text) => elNew("article", {
  className: "dynamicChild",
  title: "Click me!",
  textContent: text,
  onclick() {
    console.log(`Clicked: ${this.textContent}`);
  },
});

// 
el("#add").addEventListener("click", () => {
  el("#staticParent").append(newComment(Date.now()))
});

#staticParent {
  border: 1px solid #aaa;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dynamicChild {
  background: #eee;
  padding: 0.5rem;
}

<section id="staticParent"></section>
<button type="button" id="add">Add new</button>

资源：

• 事件.target
• 元素.closest()
• 委托事件 jQuery 与 JavaScript