Обновление : Итак, я неправильно понял вопрос, вы хотели знать, как события связаны в контексте только javascript и html.Мой оригинальный ответ ниже описывает, как jquery создает события и управляет ими.Это сводится к вызову element.addEventListener .
Из документов MDN вы видите, что цель события может быть элементом , документом , , окном или XMLHttpRequest .Из спецификаций w3 для событий DOM цель события добавляет, удаляет и отправляет событие.Таким образом, даже информация, вероятно, хранится во всех инкапсулирующих вещах, таких как элементы, это будет реализовано на уровне браузера.
Из проблемы, о которой вы упоминали, о копировании и последующей замене htmlиз тела стирает события , я думаю, что браузер просто дает вам разметку (без метаданных события), а затем, когда вы заменяете ее, метаданные исчезают.(http://jsfiddle.net/qu9bF/1/)
Оригинальный ответ : Как работают обработчики событий jquery.
Хорошо, поэтому я начал копать это для JQuery 1.4.2 (потому что у меня былоиспользовать несколько инструментов, которые не обновляются)
Сначала посмотрите на это: http://james.padolsey.com/jquery/#v=1.4.2&fn=click
function (fn) {
return fn ? this.bind(name, fn) : this.trigger(name);
}
Вот как определяется , это на самом деле не определено в коде. JQuery определяет эту функцию для всех событий / функций-обработчиков, как показано ниже, да! Они динамически созданы / определены :
jQuery.each( ("blur focus focusin focusout load resize scroll unload click
dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "),
function( i, name ) {
// the magic happens here..
//each string is added as a function to the prototype
jQuery.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};//if a handler is NOT specified then attach an event OR call/trigger it
if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});
ОтсюдаТеперь нам нужно взглянуть на связывание, теперь bind() и one() также определены следующим образом. Поиск «Код: связывание и одно событие» здесь
Отсюда я использовал chrome с этой скрипкой http://jsfiddle.net/qu9bF/ для перехода к коду. Блок из c.each(["bind" определяет функцию связывания. Источник минимизирован, но chrome может отформатировать его .
Отсюда по коду звонков JQuery.events.add вы можете найти его в разделе «События» здесь .Это не add(), что задокументировано, я думаю
Внизу, этот кусок кода - то, что делает волшебство.Соответственно он вызывает element.addEventListener или attachEvent .Посмотрите, как это добавляет на для attachEvent.
// Check for a special event handler
// Only use addEventListener/attachEvent if the special
// events handler returns false
if ( !special.setup ||
special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
// Bind the global event handler to the element
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
}
}
И вот оно у вас!:) Я надеюсь, что он ответил на оба ваших вопроса.Вы можете связать с не минимизированными версиями исходного кода jquery и пройтись по нему, чтобы разобраться.IMO иногда отладчик IE9 более интуитивен (это единственное, для чего я его использую), и использую страницы, которые я упомянул, для разумного просмотра источника.