jQuery on()方法实现动态元素事件绑定原理咨询

嗨，我来帮你拆解一下为什么jQuery的on()方法处理动态元素事件这么简洁，顺便解答你关于Mutation Observer和废弃的live()方法的疑问~

一、jQuery on() 的核心：事件委托 #

你写的$("tbody").on('click', ".delete", function(){...})本质是事件委托，不是直接给每个.delete绑定事件，而是把事件绑定到了它们的父容器tbody上——这个容器是一开始就存在于DOM里的。具体流程是这样的：

1. 当你点击某个.delete链接时，点击事件会沿着DOM树向上"冒泡"，最终触发tbody上的点击事件；
2. jQuery在tbody的点击事件触发时，会检查实际被点击的元素（也就是event.target）是否匹配你传入的.delete选择器；
3. 如果匹配，就执行你写的处理函数，而且会把this指向那个被点击的.delete元素，方便你操作它的父元素来删除行。

这种方式的好处就是：不管是页面加载时就有的.delete，还是后来点击"Add one"动态添加的，只要它是tbody的后代且符合选择器，点击时都会触发逻辑——完全不用像原生JS那样每次加完元素还要重新绑定事件。

二、原生JS为啥繁琐？ #

你用原生JS写的livingClick()是直接给每个已存在的.delete绑定onclick事件，但动态克隆出来的新元素不会继承这个绑定（哪怕用cloneNode(true)，也只会复制DOM结构和原生的事件属性，不会复制后来通过onclick添加的函数），所以每次加完行都要重新遍历绑定，自然就麻烦了。

其实原生JS也能实现和jQuery一样简洁的效果，用原生的事件委托就行：

document.querySelector('tbody').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete')) {
    e.target.closest('tr').remove();
  }
});

这样写就不用每次加元素后重新绑定了，原理和jQuery完全一致。

三、关于Mutation Observer和live()的疑问 #

1. Mutation Observer和jQuery on()没关系 #

你说Mutation Observer能检测DOM变化，但jQuery的on()根本没用到它。事件委托靠的是事件冒泡的特性，和监听DOM更新完全是两码事——不管DOM怎么变，只要事件能冒泡到绑定的父元素，就能被正确处理。

至于它自2015年没更新，其实是因为这个API已经足够稳定成熟了，能满足绝大多数DOM监听的需求，不需要频繁迭代。

2. 为啥jQuery弃用live()？ #

早期的live()方法是把事件绑定到document这个顶级元素上，每次事件触发时，都要在整个文档范围内匹配选择器，性能很差：一方面事件要从目标元素一路冒泡到document，开销大；另一方面全局匹配选择器也很耗时。

后来推出的delegate()改进了这一点，允许指定具体的父元素，再到on()方法统一了所有事件绑定的API，live()就因为性能和灵活性的问题被淘汰了——毕竟on()既支持直接绑定，又支持高效的事件委托，功能更全也更高效。

内容的提问来源于stack exchange，提问作者X-sky