我正在努力寻找挂起事件的最有效方式。
假设我们有这样的结构:
<ul>
<li> 1st li </li>
...
<li> 99999th li </li>
<ul>
所以,我们有大约 10000 个 li 元素,我们想为所有这些元素添加事件监听器,假设我们也可以使用 jQuery。
第一个想法
<li onclick="console.log(this)" >...</li>
这个解决方案的不好的部分 - 我们增加了 html 标记的大小,因为总是重复 onlick。
再想
$('ul li').on('click', function(){
console.log(this)
})
当然这个解决方案不是一个选项,因为我们添加了 10000 个事件监听器,显然不利于性能。
第三个想法,事件委托(delegate)
$('ul').on('click', 'li', function(){
console.log(this)
})
对我来说看起来非常好,我们只使用一个事件监听器,而不是垃圾 html 标记,它可以按我们的需要工作。
所以,我问这个问题,因为有时我会查看不同站点的源代码,其中大部分都使用第一种方式。为什么?第一种方式有一些优势吗?
我想这可能是因为更容易捕捉动态添加到页面的元素,但可能有一些我不知道的东西?
最佳答案
我不会去“大网站”寻找最佳网络开发实践。第一种方式与其他两种方式相比确实没有优势,因为它混合了 JavaScript 和 HTML,并且更难维护。
事件委托(delegate)将比其他两个更轻,并且具有能够处理动态生成的元素的优势,因此在这种情况下,它可能是最佳选择。在选择之前,我会使用这两种方法来分析您的应用程序。
关于javascript - 向元素添加事件监听器的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17255283/