onClick priorità su addEventListener in javascript?

Question

In questo momento, ho un listener di eventi che ascolta un clic sullo schermo. C'è anche un pulsante sullo schermo. Quando clicco sul pulsante, il listener di eventi verrà eseguito prima di onclick. C'è un modo per far sì che onclick abbia una priorità più alta?

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

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

Facendo clic sul pulsante si attiva anche il gestore eventi. 1 mostra prima di 2, quando clicco sul pulsante. Voglio 2 per mostrare prima.

Answer 1

s' addEventListner terzo argomento è il useCapture flag. Se lo si imposta su true, il gestore verrà eseguito mentre l'evento sta viaggiando in basso nell'elemento button. Tuttavia, se lo si imposta a false, il gestore verrà attivato durante la gara zampillante:

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

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

Nel tuo esempio, il onclickdeve essere eseguito prima il clic gestore sul tag body. Se si desidera invertire l'ordine di esecuzione, è necessario capture l'evento a body.

Answer 2

Una soluzione sarebbe quella di utilizzare inline in modo diverso. Quando è necessario attendere DOM, d'altra parte inline onclick si associa mentre il DOM si sta caricando.

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