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

сейчас, у меня есть прослушиватель событий, который прослушивает нажатия на экран. На экране также есть кнопка. Когда я нажимаю на кнопку, прослушиватель событий будет выполняться перед 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.

2 ответов


addEventListnerтретьим аргументом является useCapture флаг. Если вы установите его в true, обработчик будет выполнен во время перемещения события вниз до button элемент. Однако, если вы установите его в false, обработчик будет запущен, пока событие пузырится:

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

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

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


одним из решений было бы использовать inline по-разному. Когда .addEventListener нужно дождаться DOM, с другой стороны inline 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/