Просто рабочий конспект
Listener – обработчик, наблюдающий за конкретным событием. Перевод не дает приемлемого понятия: слушатель,слухач, жучок...
Оставляем просто листенер.
Event handler – обработчик события (функция)
Привязка обработчика к событию:
element.onevent = eventHandler;
Например,
var link = document.getElementById("myLink");
link.onclick = myLink.clickHandler;
Обработчик события должен быть назначен только после загрузки страницы, т.е на момент существования html-элемента.
Default actions(действия по умолчанию).
Например:
- браузер следует по кликнутой ссылке,
- сабмитит форму при нажатии кнопки submit или enter в форме,
- перемещает keyboard focus при нажатии tab
Отмена default action – возврат false.
var myLink = { clickHandler: function() {
return confirm("Are you sure you want to leave this site?");}
};}
Функция confirm (аналог alert) возвращает true при нажатии Ok и false при нажатии Cancel..
Эти ф-ции встроены в браузер!!!
Event handler может обрабатывать события для нескольких элементов!
Используется ключевое слово this.
Например, открывать все линки в новом окне:
clickHandler: function() {
open(this.href);
return false;
}
При вызове метода объекта object.method() внутри кода этого метода ключевое слово this относится к данному объекту.
Можно выделить только часть линков в класс external.
var externalLinks = {
init: function(){
var extLinks = Core.getElementsByClass("external");
for (var i = 0; i < extLinks.length; i++) {
extLinks[i].onclick = externalLinks.clickHandler;
}
},
clickHandler: function() {
open(this.href);
return false;
}};
Для конкретного события в привязке к конкретному html-элементу можно назначить только один обработчик .
А по жизни - нужно несколько. Например, при обработке полей формы кнопке submit нужно назначить разные обработчики проверки корректности данных.
Ограничение обходится с помощью event listeners.
W3C:
element.addEventListener("event", eventListener, false);
element.removeEventListener("event", eventListener, false);
MS IE опять выделилась:
element.attachEvent("onevent", eventListener);
element.detachEvent("onevent", eventListener);
Отмена default actions:
W3C: метод preventDefault(),
Модель событий MS – объект event не передаётся листенеру , а доступен через глобальный объект event со свойством returnValue вместо метода:
event.returnValue = false;
Различение браузеров – способом проверки объекта typeof.
clickListener: function(event) {
if (typeof event == "undefined") {
event = window.event;
}
if (!confirm("Are you sure you want to leave this site?")) {
if (typeof event.preventDefault != "undefined") {
event.preventDefault();
}
else {
event.returnValue = false;
}}}
Распространиение событий в ДОМе. 3 фазы:
- capture (нет в MS IE)
- target
- bubling
Во время фазы capture событие продвигается по ДОМу начиная с document, html, body вплоть до элемента и на каждом этапе проверяет наличие capture event listener для этого типа события. Если есть такой - запускается. Тип листенера задаётся 3-м параметром true/false. Этот параметр отсутствует в MS IE, поскольку в схеме MS нет 1-й фазы.
На 2-й фазе target запускается листенер элемента.
На 3-й фазе bubling событие перемещается вверх по ДОМу и на каждом шаге запускается (если есть) not capturing event listener.
Отмена фазы bubling:
W3C: event.stopPropagation();
MS IE: event.cancelBubble = true;
Кликни  или  чтобы увеличить/уменьшить изображение...
Ярлыки: распространение событий, bubling, capture, events, listeners, target Подпишись на новости Javascript и AJAX по e-mail |
Отправить комментарий