Как JQuery .click () работает за сценой?

Question

Этот вопрос просто из любопытства.Я хочу знать, как jquery .click () работает за сценой.

Например, если я создаю кнопку:

<input type="button" id="myButton" value="Click me!" />

Тогда у меня есть следующий код jquery:

$('#myButton').click( function() {
    alert("I have been clicked.");
});

Как jquery делает так, чтобы моя функция вызывалась при нажатии кнопки?

Сначала я думал, что это добавит атрибут onClick="" к тегу кнопки, но когда я проверилстраницу с Firebug я только что видел:

<input type="button" id="myButton" value="Click me!" />

Так что же делает jquery за кулисами?

Answer 1

Использует модель событий DOM, что также происходит при добавлении onClick ().поэтому в основном он регистрирует прослушиватель для кнопки, которая запускает событие click, а затем выполняет код, который вы ему сообщили.

Answer 2

Это будет зависеть от браузера.

Если вы используете браузер, поддерживающий addEventListener(), они добавят обработчик, использующий это.

Хотя я почти уверенна самом деле они присоединяют функцию, которая сначала восстанавливает / нормализует объект event, затем проверяет элемент DOM для свойства jQuery12345..., ищет обработчик в jQuery.cache и вызывает его.

Если выЗаписав свой элемент в консоль, вы увидите свойство, которое выглядит примерно так:

jQuery1296081364954: 1

Затем, если вы зарегистрируете этот номер на консоли из jQuery.cache, вы увидите соответствующие данные.

console.log(jQuery.cache[1]);

... что даст структуру примерно так:

{
   events:{
      click:[
         { /* object containing data relevant to the first click handler */ }
      ]
   },
   handle:{ /* this may be what initially gets called. Not sure. */ }
}

Поскольку jQuery нормализует объект события, это не так просто, как просто назначить обработчик дляты и звонишь.Я считаю, что это также делается с кешем, чтобы избежать утечек памяти в старых браузерах.

Answer 3

функция присоединена к событию onclick на вашем входе, но не с использованием объявления html, а с простым javascript. Вместо того, чтобы смотреть в html-код, взгляните на вкладку DOM в Firebug, вы должны найти ее там.

В простом JavaScript это похоже на

    document.getElementById('myButton').addEventListener('click',function () { alert('hello!');},false);