将事件委托给DOM中的不同元素之间的区别[重复]答案

【问题标题】：Difference between delegating events to different elements in the DOM [duplicate]将事件委托给DOM中的不同元素之间的区别[重复]
【发布时间】：2018-05-18 09:59:12
【问题描述】：

这两个 jQuery 更改事件之间在功能或性能上有什么区别吗？

$(document).on('change', '#toggleList', function () {
    //code
}

和

$('#toggleArea').on('change', '#toggleList', function () {
    //code
}

...

<div id="toggleArea">
    <select id="toggleList"></select>
</div>

【问题讨论】：

只有当 '#toggleArea' 是动态的时，它才会有所不同。它是你的意见，你喜欢哪种方式。有了文档，您每次都可以 100% 地进行绑定。
除非您的#toggleArea 与文档相同，否则将事件附加到#toggleAreadiv 会略有增加（例如毫秒），因为事件必须通过传播更少的元素。否则，没有想到。

标签： jquery

【解决方案1】：

两者在功能上没有区别。但是，存在（非常）轻微的性能差异，因为第一个示例需要事件将 DOM 从#toggleList 元素冒泡到document。第二个示例只需要在 DOM 上到达 #toggleArea 的位置，因此会稍微快一些。

旧的live() 方法用于使用您概述的第一种方法，因此已被弃用。

在理想情况下，委托事件应该分配给最接近动态创建的父元素，当document.ready 触发时，这些父元素在 DOM 中可用。尽可能避免将其分配给document。

【讨论】：