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

Динамическое подключение к событию В разд. "Реагирование на события" ранее в этом приложении мы рассмотрели, как запустить функцию на исполнения с помощью атрибута события. Но событие так-же можно подключить к функции, используя код JavaScript. В большинстве случаев, скорее всего, для подключения события к коду следует ис-пользовать атрибуты событий. Но в некоторых случаях этот подход невозможен или неудобен. Одним из самых распространенных примеров будет создание объек-та HTML в коде и последующее динамическое добавление его в страницу. В дан-ной ситуации разметка для нового элемента отсутствует, вследствие чего использо-вание атрибута события не возможно. (Этот метод применяется в примере рисова-ния на холсте в главе 6. ) Другим примером будет подключение события к встроенному объекту, а не к элементу. (Этот случай рассматривается в примерах обработки событий хранилища в главе 9. ) По всем этим причинам важно понимать, как подключать события к коду.

Существуют разные способы подключения событий, но не все они поддерживаются всеми браузерами. В этом разделе применяется подход свойства события, который поддерживается всеми браузерами. Кстати, если вы решите использовать какой - либо инструментарий JavaScript, наподобие jQuery, то, скорее всего, обнаружите, что он предоставляет еще одну систему подключений событий, которая будет работать на всех браузерах и может иметь несколько дополнительных возможностей.

К счастью, подключение событий не представляет ничего сложного. Нужно просто установить свойство события с таким же именем, как и атрибут события, который бы использовался в обычной ситуации.

Но будьте осторожны, чтобы не сделать эту ошибку: imgObject.onclick = swapImage();

Этот код выполняет функцию swapImage() и использует ее результат (если функция возвращает таковой), чтобы установить обработчик события. Это почти наверняка не то, что нам нужно.

Чтобы понять, что в действительности происходит при щелчке по элементу <img> , нужно разобраться с кодом функции swapImage() . Эта функция берет элемент <img> и модифицирует его атрибут src , чтобы тот указывал на новое изображение ( рис. П2.3):

// Отслеживаем состояние изображения — день или ночь. var dayTime = true;

// Эта функция выполняется, когда происходит событие onClick. function swapImage() {

// Меняем день на ночь или наоборот и обновляем изображение // в соответствии с новым состоянием.

if (dayTime == true) { dayTime = false; imgObject.src = "cloudy.jpg"; }

else { dayTime = true;

imgObject.src = "sunny.jpg"; }

}

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

function swapImage(e) {

...

}

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