Использование метода addEventListener () — это идеальная техника, к тому же стандартизированная в спецификации HTML5. Данный метод принимает три аргумента: тип события, исполняемую функцию и булево значение (значение логического типа).
Листинг 4.8. Добавление обработчиков событий с помощью addEventListener ()
<! DOCTYPE html>
<html lang="ru">
<head>
<script>
Function showalert (){
}
Function clickme (){
Var pelement=document. getElementsByTagName (‘p’)[0]; pelement. addEventListener (‘click, showalert, false);
}
Window. addEventListener (‘load, clickme, false);
</script>
</head>
<body>
<div id="main">
<p>На мне нельзя щелкать</p>
</div>
</body>
</html>
В листинге 4.8 вы видите тот же код, что и в листинге 4.2, однако теперь прослушиватель добавляется для каждого события с помощью метода addEventListener (). Для упорядочивания кода мы в функции clickme () присвоили ссылку на элемент переменной под названием pelement, а затем, используя эту переменную, добавили прослушиватель для события click.
Синтаксис метода addEventListener () иллюстрируется в листинге 4.8. Первый атрибут — это имя события. Второй — функция, которая будет исполняться при наступлении события. Это может быть ссылка на функцию (как в нашем случае) или просто анонимная функция. Третий атрибут, принимающий значение true или false, указывает, каким образом срабатывают множественные события. Например, мы прослушиваем событие click на двух вложенных элементах (один элемент вложен в другой). Когда пользователь щелкает на этих элементах, два события click срабатывают в порядке, определяемом этим атрибутом. Если его значение для одного из элементов равно true, то считается, что событие для этого элемента произошло первым, а для другого элемента — вторым по счету. Обычно для большинства ситуаций хватает значения false.
Анонимные функции — это функции, объявляемые динамически и не имеющие имени (поэтому они и называются анонимными). В JavaScript подобные функции чрезвычайно полезны: они помогают содержать код в порядке и не перегружать глобальный контекст независимыми функциями. В следующих главах мы еще несколько раз будем использовать анонимные функции.
Даже если в результате применения этого и предыдущего методов получаются одинаковые результаты, у addEventListener () все же остается огромное преимущество по сравнению с любыми другими подходами — он позволяет добавить неограниченное число прослушивателей для одного и того же элемента. Таким образом, это идеальная реализация для приложений HTML5.
Поскольку события — это краеугольный камень построения интерактивных веб-сайтов и веб-приложений, в спецификации HTML5 описаны несколько полезных событий. Мы изучим каждое из них в соответствующем контексте далее в этой книге.
Добавить комментарий