onClick priority over addEventListener in javascript?

Question

Right now, I have an event listener that listens to a click on the screen. There is also a button on the screen. When I click on the button the event listener will execute before the onclick. Is there a way I can make onclick have higher priority?

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

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

Clicking the button also triggers the event handler. 1 shows before 2, when I click the button. I want 2 to show first.

you are missing the `function` keyword right before your `clicked()` definition — devnull69, Apr 28 '15 at 15:06
In this fiddle you'll see that 2 shows before 1 ... as it should. Your problem must be somewhere else: http://jsfiddle.net/wte5dpq8/4/ — devnull69, Apr 28 '15 at 15:12

score 46 · Accepted Answer · answered Apr 28 '15 at 15:21

addEventListner's third argument is the useCapture flag. If you set it to true, handler will be executed while the event is traveling down to the button element. However, if you set it to false, the handler will be triggered while the event is bubbling up:

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

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

In your example, the onclick should be executed before the click handler on the body tag. If you want to reverse the order of execution, you should capture the event at body.

score 0 · Answer 2 · answered Apr 28 '15 at 15:19

One solution would be to use inline differently. When .addEventListener need to wait for DOM, on the other hand inline onclick binds while DOM is loading.

<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 priority over addEventListener in javascript?

2 Answers2

Linked