在 javascript 中 onClick 优先于 addEventListener？

Question

现在，我有一个监听屏幕点击的事件监听器。屏幕上还有一个按钮。当我点击按钮时，事件侦听器将在 onclick 之前执行。有什么方法可以让 onclick 有更高的优先级吗？

<script>
document.body.addEventListener('click',function(){alert('1');}, false);

function clicked() { 
    alert('2');
}
</script>
<button onclick="clicked()">Click this</button>

单击按钮也会触发事件处理程序。当我单击按钮时，1 显示在 2 之前。我要2先显示。

Answer 1

一种解决方案是以不同方式使用内联。当 .addEventListener 需要等待 DOM 时，另一方面内联 onclick 在 DOM 加载时绑定。

<script>
document.body.addEventListener('click',function(){alert('1');}, false);

function clicked() { 
    alert('2');
}
</script>
<button onclick="alert('2');">Click this</button>

JSFIDDLE：http://jsfiddle.net/8j9q23jw/

Answer 2

addEventListner的第三个参数是useCapture flag。如果将其设置为 true，处理程序将在事件向下行进到 button 元素时执行。但是，如果将其设置为 false，则将在事件冒泡时触发处理程序：

  capture phase  | |  / \ bubbling up
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

发件人：http://www.quirksmode.org/js/events_order.html#link4

在您的示例中，onclick 应该在 body 标签上的点击处理程序 之前执行.如果你想颠倒执行顺序，你应该capture事件在body。

在 javascript 中 onClick 优先于 addEventListener？

onClick priority over addEventListener in javascript?

javascript

onclick

handler

addeventlistener