jQuery中两种点击事件绑定方式的区别：find绑定vs事件委托

嘿，你的判断其实不完全正确哦，这两种写法在实际使用中存在关键差异，咱们来逐一拆解：

1. 直接绑定事件（代码示例1） #

$("#container").find(".element").on("click",function(){ })

这种写法的逻辑是：先通过find(".element")找到当前DOM中已经存在的所有.element元素，然后给每一个匹配到的元素单独绑定点击事件。

• 局限性：只有页面加载完成时就已经存在的.element会生效，后续通过JavaScript动态添加的同类型元素，不会自动拥有这个点击事件。
• 性能影响：如果页面中.element的数量很多，这种写法会创建大量独立的事件绑定，占用更多内存资源。

2. 事件委托（代码示例2） #

$("#container").on("click", ".element",function(){ })

这是jQuery的事件委托写法，它的逻辑是：把点击事件绑定在父容器#container上，当点击事件从子元素冒泡到父容器时，jQuery会检查触发事件的目标元素是否匹配.element选择器，如果匹配就执行回调函数。

• 优势1：支持动态元素。不管是页面初始就有的.element，还是之后通过JS动态新增的.element，点击时都会触发回调——因为事件是绑定在父容器上的，新元素的点击事件会自然冒泡到父容器被捕获。
• 优势2：性能更优。不管子元素有多少，只需要在父容器上绑定一个事件，内存占用更低，尤其在子元素数量庞大时差异更明显。

总结 #

如果你的.element全是静态元素（页面加载后不会新增），两种写法在表面效果上确实相近；但一旦涉及动态元素，或者追求更优的性能，两者的差异就非常显著了——事件委托写法的适用性和灵活性要高得多。

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