使用addEventListener事件绑定时，为什么点击事件函数只能执行一次？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《使用addEventListener事件绑定时，为什么点击事件函数只能执行一次？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

addeventlistener事件失效之惑

在使用addeventlistener事件绑定时，为什么点击事件函数只能执行一次？

代码示例

const dataarr = [
  { id: 1, icon: '火龙果.png', ischecked: true, num: 2, price: 6 },
  { id: 2, icon: '荔枝.png', ischecked: false, num: 7, price: 20 },
  // ...省略部分数据
];

// 个数添加功能
const jia = document.queryselectorall('.increase');
const jian = document.queryselectorall('.decrease');
for (let i = 0; i < jia.length; i++) {
  jia[i].addeventlistener('click', function () {
    console.log(123);
    dataarr[i].num++;
    render(dataarr);
  });
}

运行代码后，当第一次点击按钮时，事件函数正常执行，但再次点击按钮时却没有响应。

原因分析

如查到的答案所言，innerhtml会替换元素内容，导致事件绑定销毁。在本例中，渲染函数render会使用innerhtml更新元素内容，因此每次渲染都会销毁之前的事件绑定。

解决方案

推荐使用事件委托方式解决此问题。在父节点上绑定点击事件，并在回调函数中通过event.target判断点击了哪个按钮。

document.querySelector('.parent').addEventListener('click', function(event) {
  const target = event.target;
  if (target.closest('.increase')) {
    // 按钮增加逻辑
  } else if (target.closest('.decrease')) {
    // 按钮减少逻辑
  }
});

通过事件委托，无论元素内容如何变化，事件绑定始终存在于父节点上，因此可以正常触发事件函数。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~