addEventListener()只执行一次的问题 -火山引擎

使用事件代理或对 addEventListener() 进行反注册操作

示例代码：

使用事件代理：

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
<script>
  const list = document.getElementById('list');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log(event.target.textContent);
</script>
在这个示例中，我们为 <ul> 元素添加了一个事件监听器，当 <li> 元素被点击时，事件监听器会被触发。由于事件的冒泡机制，点击任何一个 <li> 元素都会触发该事件监听器，我们可以通过检查 event.target 的值来判断哪个元素被点击。
使用反注册操作：
<button id="btn">Click me</button>
<script>
  const btn = document.getElementById('btn');
  function handleClick() {
    console.log('Button clicked!');
    btn.removeEventListener('click', handleClick);
  btn.addEventListener('click', handleClick);
</script>
在这个示例中，我们为 <button> 元素添加了一个事件监听器，当按钮被点击时，事件监听器会被触发。在事件处理程序中，我们使用 removeEventListener() 方法来反注册事件监听器，以便确保它只会被执行一次。