在javascript(JQuery)中,将相同的事件类型绑定到每个元素或绑定到它们的父元素的最佳实践是什么?
例如,您有一个DOM元素列表,例如,li(或table celltd)。 假设您正在处理一个单击事件,当用户单击列表(或单元格)中的任何元素时 我考虑了两种方法: 1.将“单击”事件绑定到每个元素或 2.将事件绑定到父级ul,然后从“事件中查找目标。目标” 我选择了第一个,因为它简单明了,更可靠,将来每个人都更容易维护。所谓可靠性,我的意思是没有额外的代码会引入bug。 我知道第一种方法不太理想 因此,问题是: 1) 我不知道如何衡量第一种方法与第二种方法相比对性能的影响,或者脚本将消耗多少内存。 在第一种情况下,我大约可以有多少开销 2) 我请同事和一些人建议我采取第二种方法。有人告诉我,这本身就是一种很好的实践,称为“事件委托”,而第一种实践是一种糟糕的代码实践 所以我很好奇。在javascript(JQuery)中,将相同的事件类型绑定到每个元素或绑定到它们的父元素的最佳实践是什么?,javascript,events,binding,Javascript,Events,Binding,例如,您有一个DOM元素列表,例如,li(或table celltd)。 假设您正在处理一个单击事件,当用户单击列表(或单元格)中的任何元素时 我考虑了两种方法: 1.将“单击”事件绑定到每个元素或 2.将事件绑定到父级ul,然后从“事件中查找目标。目标” 我选择了第一个,因为它简单明了,更可靠,将来每个人都更容易维护。所谓可靠性,我的意思是没有额外的代码会引入bug。 我知道第一种方法不太理想 因此,问题是: 1) 我不知道如何衡量第一种方法与第二种方法相比对性能的影响,或者脚本将消耗多少内存
是否真的将相同的事件类型绑定到每个元素是一种糟糕的代码实践?对于简单站点上的简单单击事件,您不必太担心性能。但从技术上讲,两者之间存在差异
$('li').on('click', function(){ ... });
及
第一种方法不适用于动态添加的内容(例如,在ajax调用之后)。但是如果你在ul中动态添加新的li,那么第二个脚本就可以了
如果对您来说很重要的是易于维护,那么您可以像这样保持简单:
var $doc = $(document);
$doc.on('click', 'li', function(){ ... });
这个问题有用吗?我从它的链接问题中得到了答案,谢谢!在现代浏览器中,与依赖事件冒泡相比,将事件附加到许多类似元素的性能成本很低。绑定到父级具有动态添加更多元素的优势。谢谢
var $doc = $(document);
$doc.on('click', 'li', function(){ ... });