在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先显示。

- BlueElixir

---

请提供一些代码，好吗？ - AvetisCodes

你在 clicked() 定义之前漏掉了 function 关键字。 - devnull69

在这个代码片段中，你会看到2在1之前显示...正如它应该的那样。你的问题一定是出在别的地方：http://jsfiddle.net/wte5dpq8/4/ - devnull69

Answer 1

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

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

来源: http://www.quirksmode.org/js/events_order.html#link4

在您的示例中，onclick应在body标签上的单击处理程序之前执行。如果要反转执行顺序，则应在body上捕获事件。

- musically_ut

Answer 2

一个解决方案是不同地使用内联。当 .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/

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

- sadaf2605