javascript - javascript(JQuery)中的最佳实践是什么，将相同的事件类型绑定(bind)到每个元素或绑定(bind)到它们的父元素？

Question

例如，您有一个 DOM 元素列表，例如 li(或表格单元格 td)。 假设当用户单击列表(或单元格)中的任何元素时，您正在处理单击事件。

我考虑了两种方法: 1.将“click”事件绑定(bind)到每个元素或 2. 将事件绑定(bind)到父ul，然后从'event.target'中查找目标。

我选择第一个，因为它简单，更可靠，也更容易被大家以后维护。我所说的可靠性是指没有额外的代码会引入错误。 我知道第一个不太理想。

所以问题是:

1)我不知道如何衡量性能影响或脚本在第一种方法中与第二种方法相比会消耗多少内存。 在第一种情况下我大约需要多少开销？

2)我询问了同事，有些人建议我采用第二种方法。有人告诉我，这本身就是一种很好的实践，称为“事件委托(delegate)”，而第一个是一种糟糕的代码实践。

所以我很好奇。 将相同的事件类型绑定(bind)到每个元素真的是一种不好的代码实践吗？

Answer 1

对于简单网站上的简单点击事件，您不必太担心性能。但从技术上讲，两者之间存在差异

$('li').on('click', function(){ ... });

和

$('ul').on('click', 'li', function(){ ... });

第一个不适用于动态添加的内容(例如，在 ajax 调用之后)。但是，如果您动态地向 ul 添加新的 li，则第二个脚本将起作用。

如果易于维护对您来说很重要，那么您可以像这样保持简单:

var $doc = $(document);
$doc.on('click', 'li', function(){ ... });