创建一次性事件处理程序

当您使用addEventListener()方法将事件处理程序添加到元素的事件时,事件处理程序将在每次事件发生时执行。

要创建一个仅执行一次的一次性事件处理程序,请使用addEventListener()方法的第三个参数。

element.addEventListener(type,handler,{once: true});Code language: CSS (css)

addEventListener()方法的第三个参数是一个对象,它具有一个属性once。如果将其设置为true,则事件处理程序将仅执行一次。

以下示例显示了如何创建一个一次性事件处理程序。假设您有一个带有类.btn的按钮。

<button class="btn">Subscribe</button>Code language: HTML, XML (xml)

以下将一次性事件处理程序添加到按钮的点击事件

const btn = document.querySelector('.btn');

btn.addEventListener('click', function (e) {
  alert('Subscribed!');
}, {
  once: true
});Code language: JavaScript (javascript)

如果您单击按钮,它将只显示一次alert对话框。

本教程是否有帮助?