Слушатели событий Javascript - Порядок обмана

Question

Если в элементе есть несколько приемопередатчиков событий, будет ли порядок выполнения быть основан на том, где/когда события привязаны (расположены в коде сверху вниз). Гарантировано, в 100% случаев?

Или есть какие-либо «случайности», связанные с этим. Как насчет микширования слушателей событий jQuery и vanilla на одном элементе?

Answer 1

(Предполагая, что вы говорите о том же типе и элементе события) Обработчики событий будут выполняться в том порядке, в котором регистрируются обработчики. Это верно, когда вы имеете дело с дескрипторами jQuery или обработчиками javascript (этап захвата работает до пузырения) в одиночку, а не в смешанном режиме.

Если у вас смешанные обработчики, jQuery добавит обработчик vanila, когда он попытается зарегистрировать обработчик типа в первый раз для элемента, поэтому он будет следовать порядку обработчиков ванили по порядку (но все jQuery обработчики будут выполняться, когда собственный родной обработчик Jquery в срабатывании)

var el = document.getElementById('clickme'); 
 

 
el.addEventListener('click', function() { 
 
    snippet.log('o - 1'); 
 
}); 
 
el.addEventListener('click', function() { 
 
    snippet.log('o - 2'); 
 
}); 
 

 
$('#clickme').click(function() { 
 
    snippet.log('jq - 1(o -3)') 
 
}); 
 
el.addEventListener('click', function() { 
 
    snippet.log('o - 4'); 
 
}); 
 
$('#clickme').click(function() { 
 
    snippet.log('jq - 2') 
 
}); 
 
$('#clickme').click(function() { 
 
    snippet.log('jq - 3') 
 
}); 
 
el.addEventListener('click', function() { 
 
    snippet.log('o - 5'); 
 
}); 
 
el.addEventListener('click', function() { 
 
    snippet.log('o - 6'); 
 
}); 
 
$('#clickme').click(function() { 
 
    snippet.log('jq - 4') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 

 
<button id="clickme">This is for testing</button>

Answer 2

Исторически существуют две модели поведения.

Netscape сказал, что событие на элементе1 происходит первым. Это называется захватом событий.

Корпорация Майкрософт подтверждает, что событие на элементе2 имеет приоритет. Это называется барботированием событий.

Теперь вы можете решить, какой из них (сверху вниз или снизу вверх), чтобы использовать, установив | снятия с охраны последний параметр AddEventListener:

element1.addEventListener('click',doSomething2,true); 
element2.addEventListener('click',doSomething,false); 

Если последний аргумент является истинным обработчик события устанавливается для фаза захвата, если она ложна, обработчик события установлен для фазы барботирования.

Here и here все объяснено отлично.

Answer 3

Это очень полезное обсуждение для EventListeners. Я пытался несколько раз, чтобы использовать синтаксис, например ...

element.addEventListener("event", callFunction(this.val)) 

У меня было много вопросов, чтобы получить, что хорошо кормить в отдельную функцию. Лучше связать функцию непосредственно с событием, если это возможно. то есть.

element.event = function() { /* enter your function contents */ }; 

Однако я могу вспомнить возможные причины, по которым вы не всегда сможете это делать каждый раз. Возможно, в событии, которое вы вызываете к элементу, который еще не может быть определен или задан сценарием.