Question

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

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

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

Answer 1

您可以使用事件委派：

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

Answer 2

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

相反，如果div或其他元素包含您对处理click事件感兴趣的所有元素，则可以将事件侦听器放在容器上，然后再将通过检查事件的target属性来确定单击了哪个元素。这是因为“事件传播” - 如果没有直接处理您单击的元素，事件将向上传播。

下面的简单示例只有两个按钮。这是直接的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>

Javascript性能 - 迭代dom并添加监听器

2 个答案: