【发布时间】：2014-10-22 13:15:08
【问题描述】：
问题：我需要在动态运行时将任意数量的事件处理程序绑定到任意数量的元素（DOM 节点、window、document），并且我需要能够更新事件在我的页面的生命周期内绑定动态创建（或销毁）的节点。我可以看到解决此问题的三个选项：
I) window上的事件委托
II) 在每个节点上直接绑定事件
III) 共同祖先的事件委托（直到运行时才知道，并且可能需要在 DOM 更改时重新计算）
最有效的方法是什么？
一点背景
我正在处理一组需要对用户事件（点击、滚动等）进行分析跟踪的页面，并且我希望能够在一堆页面中轻松配置这些事件处理程序，而无需编写脚本处理每个实例的事件绑定。此外，因为我可能需要在未来跟踪新事件，或者跟踪动态添加到页面/从页面中删除的元素上的事件，所以我需要能够考虑到生命周期中发生的 DOM 变化页面。
作为我目前正在考虑的一个例子，我想创建一个接受配置对象的函数，该对象允许程序员为每个事件指定默认处理程序，并允许他们为特定元素覆盖它们：
Analytics.init({
// default handlers for each event type
defaultHandlers: {
"click": function(e) { ... },
"focus": function(e) { ... }
},
// elements to listen to
targetElements: {
// it should work with non-DOM nodes like 'window' and 'document'
window: {
// events for which the default handlers should be called
useDefaultHandlers: ['click'],
// custom handler
"scroll": function(e) { ... }
},
// it should work with CSS selectors
"#someId": {
useDefaultHandlers: ['click', 'focus'],
"blur": function(e) { ... }
}
}
});
来源
【问题讨论】：
-
我认为这取决于。如果你想处理大多数到达
document的事件，你可以委托给它。但是如果你只处理一小部分，特别是如果事件触发很多（例如mousemove，scroll），最好委托给更近的祖先。如果有很多元素，我不会绑定到每个元素。 -
Backbone.js 有一种非常优雅的方法。见View-delegateEvents。
标签： javascript jquery google-analytics dom-events event-delegation