jQuery的$(xx).on("click","a.foo",xxx)为何能监听动态新增元素？

这问题问得特别到位！其实核心就是**事件委托（Event Delegation）**的机制——jQuery的这个写法本质上是利用了DOM事件的冒泡特性，完美解决了动态新增元素的事件绑定问题。

咱们先对比下两种写法的本质区别：

• 你写的原生JS代码：document.querySelectorAll('a.foo')会获取当前页面中所有匹配的元素，然后逐个绑定点击事件。但如果之后再新增a.foo元素，这些新元素根本没被包含在之前的els集合里，自然没有绑定事件。
• jQuery的$(document).on("click", "a.foo", ...)：它并没有直接把事件绑定在a.foo元素上，而是把事件监听器绑定在了**父级元素（这里是document）**上。

接下来拆解jQuery具体是怎么运作的：

1. 当你调用这个方法时，jQuery会在指定的父元素（document）上注册一个点击事件监听器。
2. 当页面上任何元素被点击时，点击事件会沿着DOM树向上"冒泡"——从触发点击的元素开始，依次经过它的父元素、祖父元素，直到到达绑定了监听器的document。
3. 此时jQuery的事件处理函数被触发，它会先拿到实际触发点击的元素（也就是event.target）。
4. 然后jQuery会从这个触发元素开始，向上遍历DOM树，检查是否存在匹配选择器a.foo的元素。一旦找到第一个匹配的元素，就会把回调函数的this指向这个元素，同时传递事件对象，执行你写的回调逻辑。

换句话说，不管是绑定事件时就存在的a.foo，还是后来通过JS动态新增的，只要它们被点击，事件都会冒泡到document，jQuery就能捕获到并判断是否要执行回调——这就是它能对动态元素生效的原因。

其实用原生JS也能实现同样的效果，比如：

document.addEventListener('click', function(event) {
  // 找到离点击元素最近的匹配a.foo的元素
  const targetElement = event.target.closest('a.foo');
  if (targetElement) {
    alert("foo");
  }
});

这段代码的逻辑和jQuery的实现思路完全一致，只是jQuery帮我们把这些细节封装成了简洁的API而已。

内容的提问来源于stack exchange，提问作者Andrew Newby