Собственно говоря, один раз разобраться с различием моделей стандарта W3C и MS IEполезно, безусловно. Один раз. Но всё время выполнять эти проверки и лепить свои функции - не рационально. JQuery делает всё это просто замечательно! Берёт на себя все заботы по различию браузеров.
Надо просто воспользоваться библиотекой - и вперёд!
$(document).ready() event handler.
Выполняет функции встроенного события onload.
Однако window.onload срабатывает, когда документ полностью загружен. Т.е., каждый html-элемент на странице доступен для javascript.
$(document).ready() срабатывает, когда DOM готов к использованию, не ожидая загрузки связанных файлов (например, картинок). window.onload можно присвоить только один обработчик. Каждый новый заменяет предыдущий.
Напротив, механизм $(document).ready() организует очередь вызовов обработчиков в порядке их регистрации.
Эквивалентные сокращения для $(document).ready() : $().ready(function(){ ...наш код ...});
или $(function(){ ...наш код ...});
Впрочем, придется немного вернуться назад - к кирпичикам JQuery.
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.
При вызове метода объекта 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;
Кликни или чтобы увеличить/уменьшить изображение...
