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

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举办活动。

Answer 2

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

<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/

onClick优先于javascript中的addEventListener？

2 个答案: