события на узле DOM
Вчера столкнулся с кодом
<a id="proceed_to_checkout" onclick="submitPaymentInfo();">Next</a>
$("#proceed_to_checkout").bind("click", submitPaymentInfo);
function submitPaymentInfo() {}
И меня эти два обработчка смутили. Мне стало интересно, как оно на самом деле работает, что происходит… Ведь могли вызываться и разные функции, тогда последовательность вызова уже имела бы значение. Первое, что пришло в говолу: один обработчик перекрывает другой потому что они вешаются на свойство onclick
document.getElementById('proceed_to_checkout').onclick
Но запустив все это в отладчике Хрома, увидел, что вначале вызывается обработчик onclick, а затем обработчик jQuery, который можно увидеть так
$('#proceed_to_checkout').data('events')
“Что хза чухня”, подумал я и додумался открыть во вкладке отладчика Elements правую закладку Events Listners с включенным фильтром
Selected node Only и обнаружил там эти самые два обработчика. “Что хза чухня”, подумал я опять и полуз гуглить.
Интересная статья поведала, что это действительно совершенно разные обработчики, с разным механизмом. onClick вешается на каждый конкретный элемент DOM и срабатывает, что естественно, по клику на нем (но всплытие событий тоже никуда не девается – вложенные клики тоже отработают). А обработчик bind (синоним on) реально навешивается на document (на который он навешивет все свои обработчики) и просто ловит всплытие событий. Поэтому это два разных обработчика.