Читать «HTML5. Недостающее руководство» онлайн - страница 318

Мэтью Мак-Дональд

else { dayTime = true;

imgObject.src = "sunny.jpg"; }

}

Иногда событие передает информацию своему обработчику. Чтобы получить эту информацию, функции нужно дать один параметр. По соглашению, этот параметр обычно называется event или просто e :

function swapImage(e) {

...

}

Свойства объекта события зависят от этого события. Например, событие onMouseMove предоставляет текущие координаты указателя мыши (которые исполь-зуются в программе рисования в разд. "Создание простой программы рисования" главы 6 ).

Нужно отметить еще одну деталь. При подключении события название события в обязательном порядке пишется строчными буквами. Это отличается от подклю-В книге названия событий даются в соответствии с соглашением CamelC ase 1 , по кото-рому каждое новое слово в названии пишется с прописной буквы, например onLoad или onMouseOver . Но в коде, согласно требованиям JavaScript, все названия пишутся

строчными буквами , т. е. onload или onmouseover .

Рис. П2.3. Щелчок по изображению активирует событие onClick этого изображения. Это событие в свою очередь активирует функцию, которая загружает новое изображение

Подставляемые в строку функции Для работы предыдущего примера функцию swapImage() нужно определить где - то в другом месте кода. Иногда вместо этого функцию можно определить в том же месте кода, где она подключается к событию. Такая функция называется подстав-ляемой в строку (inline function).

// Код функции swapImage() теперь вставляется сюда. if (dayTime == true) {

dayTime = false;

imgObject.src = "cloudy.jpg";

else {

dayTime == true;

imgObject.src = "sunny.jpg";

}

};

Этот подход к обработке событий применяется менее часто, чем использование отдельной, именованной функции. Но это все равно полезный метод для опреде-ленных целей и иногда используется в примерах в этой книге.

Подставляемые в строку функции иногда полезны при исполнении асинхронных за-дач, т. е. задач, которые исполняются браузером в фоновом режиме. По завершению выполнения асинхронной задачи браузер активирует событие, чтобы известить код об этом. Иногда самым легким подходом в этой ситуации будет вставка кода для обра-

ботки завершения задачи непосредственно рядом с кодом, который активировал вы-полнение этой задачи. (В конце разд. "Вставка в холст изображений" главы 7 пред-ставлен пример такого кода, который асинхронно загружает изображение, а потом обрабатывает его.)

Наконец, есть еще один тип подставляемой в строку функции, которая использует-ся во многих примерах в этой книге. Это обработчик события onLoad окна, который активируется после полной загрузки и отображения страницы. Это будет логичной точкой для запуска кода. Если попытаться исполнить код до полной загрузки стра-

ницы, то возможно возникновение проблем, если объект для требуемого элемента еще не был создан. Далее показан пример такой функции: <script>

window.onload = function() {

alert("The page has just finished loading."); }

</script>

Этот подход позволяет не беспокоиться о местоположении блока сценариев. Таким образом, код инициализации можно разместить там, где ему место — в блоке <head> вместе с остальными функциями JavaScript.