приоритет 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/