委托事件

当现有或动态元素（将来添加到 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

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

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

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

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

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

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

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

我想出了一个简单的解决方案 ，它似乎效果很好（尽管支持旧版 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));

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