На этом шаге мы рассмотрим вопросы, связанные с использованием различных функций, вызываемых в ответ на возниконовение одного и того же события.
Традиционный способ регистрации обработчиков событий в JavaScript (помимо добавления атрибутов обработчиков непосредственно в разметке HTML) заключается в присваивании функций соответствующим атрибутам элементов DOM. Например, предположим, что определена следующая функция:
function doStuff()
{
// Реализация некоторых действий...
}
Мы можем использовать ее в качестве значения атрибута в разметке HTML:
<body onload="doStuff();">
window.onload = doStuff;
В обоих случаях функция будет вызвана сразу же после загрузки страницы. Преимущество второго подхода состоит в отделении реализации поведения от разметки.
Примечание. Обратите внимание, что при присваивании функции атрибуту события в коде разметки указывается только ее имя, без круглых скобок. Если указать круглые скобки, функция вызовется немедленно; имя без скобок просто идентифицирует функцию и может быть использовано для ее вызова позднее.
Такой подход может применяться при наличии лишь одной функции. Допустим, что имеется вторая функция:
function doOtherStuff()
{
// Реализация некоторых других действий...
}
Можно попытаться присвоить эту функцию обработчику события загрузки страницы:
window.onload = doOtherStuff;
Однако тем самым отменится первое присваивание. Атрибут .onload может хранить только одну ссылку на функцию, поэтому, используя данный способ, мы не сможем дополнить существующую реализацию поведения.
Механизм на основе $(document).ready() обрабатывает рассматриваемую ситуацию гораздо изящнее. При каждом обращении этот метод добавляет новую функцию во внутреннюю очередь. В результате, когда страница загрузится, будут выполнены все функции. Вызов функций будет происходить в порядке их регистрации.
Примечание. Справедливости ради следует отметить, что библиотека jQuery не обладает монополией на способы решения этой проблемы. Можно написать функцию JavaScript формирующую новую функцию для вызова существующего обработчика onload, а затем вызывающую переданный ей обработчик. Методы, характерные для разных браузеров, такие как document.addEventListener() и document. attachEvent(), предлагают похожие функциональные возможности, но библиотека jQuery позволяет решить данную задачу, не беспокоясь о проблеме совместимости браузеров.
На следующем шаге мы рассмотрим сокращения в программном коде.
