Javascript性能-在dom上迭代并添加侦听器

Javascript performance - Iterating over dom and adding listeners

本文关键字：迭代 添加 侦听器 dom 性能 Javascript      更新时间：2023-09-26

我目前正在一个大型web项目中工作，该项目中有许多dom元素，需要一个监听器来点击/更改/。。。事件。主javascript文件的前500行代码如下所示。

$( ".bla" ).each(function(e) {
    $(this).on("click", function(){
        ... 
    });
});

因此，基本上我们添加了大约100个侦听器，对于每个侦听器，我们必须在完整的dom树上进行迭代。我认为这将占用相当大的计算能力。是否有类似最佳实践的解决方案来避免这种情况？

您可以使用事件委派：

$(document).on("click", ".bla", function(){
  // ...
});

希望您从其他答案中了解到不需要使用each。但是，甚至可能不需要像您的示例中那样选择.bla类的所有元素。

相反，如果div或其他元素包含您有兴趣处理点击事件的所有元素，则可以将事件监听器放在容器上，然后通过检查事件的target属性来确定哪个元素被点击了。这是由于"事件传播"而起作用的——如果不直接对单击的元素进行处理，则事件将向上传播到DOM。

下面只有两个按钮的简单示例。这是一个直接的Javascript，应该很容易转换为JQuery——希望它能有所帮助。

<html>
<head>
    <script>
        setTimeout(function() {
            document.getElementById('container').addEventListener('click', function(event) {
                alert('You clicked ' + event.target.innerHTML);
            });   
        });
    </script>
</head>
<body>
<div id="container">
    <button id="fooButton" type="button">foo</button>
    <button id="barButton" type="button">bar</button>
</div>
</body>
</html>
相关文章：