js event优先级如何确定 - 问答

在 JavaScript 中，事件优先级通常是根据事件监听器的类型和添加顺序来确定的。以下是一些关于事件优先级的规则：

内联事件处理程序：如果在 HTML 元素上直接使用 onclick、onmouseover 等属性定义事件处理程序，那么这些处理程序的优先级最高。

<button onclick="alert('Inline handler')">Click me</button>

浏览器默认行为：如果事件处理程序没有阻止浏览器的默认行为，那么浏览器可能会触发默认行为。在这种情况下，内置的事件处理程序优先级较高。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  alert('Custom handler');
});

JavaScript 事件监听器：通过 addEventListener 方法添加的事件监听器优先级较低。如果有多个监听器，它们将按照添加的顺序执行。后添加的监听器会先执行。

document.querySelector('button').addEventListener('click', function() {
  alert('Handler 1');
});

document.querySelector('button').addEventListener('click', function() {
  alert('Handler 2'); // 这个监听器会先执行，因为它是在另一个监听器之后添加的
});

使用 addEventListener 的第三个参数：从 Firefox 2 开始，可以使用 addEventListener 的第三个参数（useCapture）来改变事件处理的顺序。true 表示在捕获阶段执行，false 表示在冒泡阶段执行。需要注意的是，这种方法并不会改变事件监听器的优先级，只是改变了执行顺序。

document.querySelector('button').addEventListener('click', function() {
  alert('Handler 1'), false; // 在冒泡阶段执行
});

document.querySelector('button').addEventListener('click', function() {
  alert('Handler 2'), true; // 在捕获阶段执行
});

总之，事件优先级主要取决于事件处理程序的类型和添加顺序。内联事件处理程序和浏览器默认行为优先级较高，而通过 addEventListener 添加的事件监听器优先级较低。

0 赞

0 踩