太多的事件侦听器正在减慢点击响应

Question

我有一个包含数百个切换按钮的表单。我还有大约一百个事件监听器，如下所示：

function my_function() {
/*do a bunch of stuff*/
}
addEventListener("click", function() { my_function(); })

随着我开发表单的几个月过去，每次点击后的延迟变得越来越大。我能理解为什么。

我的问题是，是否有简单的修复方法来改进它？例如，如果我更具体地定位元素，如下所示：

addEventListener("click", function({target}) { 
    if(target.matches("input[type='radio']")) { my_function(); } 
});

这会缩短加载时间还是只会让我的代码变长？或者使用 jquery 以某种方式触发事件会更快吗？

Answer 1

您需要在完成时删除事件侦听器

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Answer 2

向父对象添加一个事件侦听器并检查点击的目标是否是切换按钮，即通过检查 class 名称：

parent.addEventListener('click', e => {
    if (e.target.classList.contains('toggle-button')) {
        // do your stuff
    }
});

Answer 3

您可能想要构建一个包装器并将事件侦听器分配给它，然后您可以使用特定元素的特征来确定单击了什么...

const my_function = event => {
  if (event.target.nodeName == "INPUT") {
    if (event.target.type == "radio") console.log('this is a radio button!')
  }
  if (event.target.nodeName == "BUTTON") {
    if (event.target.type == "submit") console.log('this is a regular button!')
  }
}

document.getElementById('wrapper').addEventListener("click", event => my_function(event))

还有 HTML...

<div id="wrapper">
  <input type="radio" id="test">Hello World</input>
  </br>
  <button type="radio" id="test">Hello World</button>
</div>

Here's a working pen

如果你想区分相同类型的不同元素，你也可以使用id。如果您想从元素本身获取任何信息，请使用 event.target.innerHTML。

编辑：我还在 codepen 中添加了一个令人讨厌的数字 buttons/inputs 以向您展示这可以解决您的减速问题。

太多的事件侦听器正在减慢点击响应

Too many event listeners are slowing down click response

javascript

event-listener