onClick приоритет над addEventListener в JavaScript?

Question

Прямо сейчас у меня есть слушатель событий, который слушает щелчок на экране. На экране также есть кнопка. Когда я нажимаю на кнопку, прослушиватель событий запускается до включения. Есть ли способ, которым я могу сделать, чтобы онклики имели более высокий приоритет?

<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 флаг. Если вы установите его true, обработчик будет выполняться во время перемещения события к buttonэлемент. Однако, если вы установите егоfalse, обработчик будет запущен во время всплытия события:

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

От: http://www.quirksmode.org/js/events_order.html

В вашем примереonclickдолжен быть выполнен перед обработчиком клика наbody тег. Если вы хотите изменить порядок исполнения, вам следует capture событие в body,

Answer 2

Одним из решений будет использование inline по-другому. когда .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/