在开发前端网页应用时，我们经常需要对 DOM 元素添加事件监听器。使用 addEventListener 方法可以方便地实现这个功能，但是如果不注意，会出现重复绑定问题。这个问题会导致事件被触发多次，影响网页的性能和用户体验。本文将介绍 ES7 中的解决方案，帮助开发者避免这个问题。
重复绑定问题的原因
重复绑定问题的原因是因为事件监听器被添加了多次。这个问题可能是由于以下原因导致的：
- 代码中多次调用 addEventListener 方法，每次都传入相同的事件类型和处理函数。
- 代码中使用了事件委托，但是在父元素和子元素上都添加了相同的事件监听器。
ES7 的解决方案
ES7 中新增了一个实验性特性，叫做 once 选项。这个选项可以让事件监听器只被触发一次，避免了重复绑定问题。
使用 once 选项的方法与普通的 addEventListener 方法相同，只需要在第三个参数中传入一个对象，将 once 属性设置为 true 即可。
element.addEventListener('click', () => {
console.log('click');
}, { once: true });这个例子中，点击事件只会被触发一次，即使多次调用了 addEventListener 方法。
兼容性问题
由于 once 选项是 ES7 中的实验性特性，目前并不是所有的浏览器都支持。如果需要在所有主流浏览器中使用该特性，可以使用一个 polyfill 库来实现。
import 'eventlistener-polyfill';
这个库可以在不支持 once 选项的浏览器中，通过其他方式来实现只触发一次的效果。
总结
重复绑定问题是前端开发中常见的问题之一，解决这个问题可以提高网页的性能和用户体验。ES7 中新增的 once 选项为我们提供了一种简单的解决方案，可以让事件监听器只被触发一次。需要注意的是，该选项是实验性特性，需要在使用前进行兼容性测试和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dbf5db1886fbafa48cc886