События всегда были одним из самых мощных объектов в JavaScript. JavaScript предоставляет два метода, addEventListener и AttachEvent, для привязки событий к узлам DOM. jquery дополнительно инкапсулирует их и предоставляет метод привязки, совместимый с различными браузерами. Теперь этот традиционный метод привязки событий имеет следующие недостатки:
1. Возможно, вам придется связать много EventHanders.
Если в таблице на странице 100 строк, событие клика должно быть привязано к каждой строке. Затем необходимо привязать 100 обработчиков событий, что значительно снижает производительность страницы, поскольку для хранения этих обработчиков необходимо создать больше памяти.
2. Событие невозможно добавить после привязки к узлу DOM.
Если код на странице выглядит следующим образом:
Скопируйте код кода следующим образом:
$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">test</div>')
Добавленный позже элемент div не может запускать события щелчка.
Чтобы решить эти две проблемы, в JavaScript появился прокси событий (прокси событий). Во-первых, давайте разберемся с механизмом всплытия в js.
Практически все браузеры поддерживают всплытие событий. Когда событие инициируется на узле DOM, оно будет распространяться вплоть до корневого узла документа. Поскольку все события узла в конечном итоге будут доставлены в корневой узел документа, если мы напрямую свяжем событие с корневым узлом документа (узлом документа), а затем воспользуемся event.target, чтобы определить, какой узел вызвал событие, уменьшится ли это во многом EventHandlers? А как насчет привязки?
Метод live в jquery официально реализован на основе этого принципа. Давайте реализуем простую версию live:
Скопируйте код кода следующим образом:
$.fn.mylive=функция(eventType,fn){
вар that=this.selector;
$(документ).bind(eventType,function(event){
var match=$(event.target).closest(that)
если(match.length !== 0){
fn.apply($(event.target),[событие]);
}
})
}
$("#tb td").mylive('click',function(event){
оповещение(event.target.innerHTML);
});
var tb='<table id="tb"> /
<тр> /
<td>первый столбец</td>/
<td>второй столбец</td>/
<td>третий столбец</td>/
</tr>/
</таблица>';
$("тело").append(ТБ);
В методе live событие привязано к узлу документа, а $(event.target).closest(that) соответствует элементу, который фактически вызвал событие. В демо-версии мы привязали события кликов для каждого TD, добавленного позже. Когда мы нажимаем на разные TD, мы обнаруживаем, что появляются соответствующие им текстовые окна подсказок.
Живой метод компенсирует два недостатка традиционного метода привязки событий, упомянутые ранее. Но живой метод все же имеет свои недостатки. Посмотрите на этот код:
Скопируйте код кода следующим образом:
$("#tb td").mylive('click',function(event){
оповещение(event.target.innerHTML);
});
Сначала он пройдет весь документ на основе селектора jquery, найдет все элементы #tb td и сохранит их как объекты. Однако в методе живой реализации эти объекты не используются, а в качестве строки, соответствующей источнику события, используется только «#td td». Это значительно увеличивает количество ненужного потребления.
Так есть ли способ улучшить эту ситуацию? Прокси-метод делегата предоставляется в jQuery, который поддерживает привязку событий к указанным элементам, а не только к документам. Поняв его принцип, давайте реализуем простую версию делегата:
Скопируйте код кода следующим образом:
$(body).append('<div id="dv"></div>');
$.fn.mydelegate=function(селектор,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest(селектор);
если(match.length !== 0){
fn.apply($(event.target),[событие]);
}
});
}
$("#dv").mydelegate('td','click',function(event){
оповещение(event.target.innerHTML);
});
var tb='<table id="tb"> /
<тр> /
<td>первый столбец</td>/
<td>второй столбец</td>/
<td>третий столбец</td>/
</tr>/
</таблица>';
$("дв").append(ТБ);
Методу mydeletage не требуется получать все объекты td, а только объект div, с которым связано событие. Это лучше, чем живой метод с точки зрения эффективности выполнения.
Это всего лишь введение, которое поможет всем понять принцип прокси событий. Реализация live и делегирования в jquery намного сложнее.