Обработчики событий

Существует три разных способа регистрации обработчика событий для элемента HTML:

• можно добавить к элементу новый атрибут;

• зарегистрировать обработчик как свойство элемента;

• использовать новый стандартизированный метод addEventListener().

После того как был стандартизирован метод addEventListener(), данную процедуру стали называть прослушиванием события, а подготовку кода, который будет реагировать на событие, добавлением прослушивателя события к определенному элементу.

Строчные обработчики событий

Мы эту технику уже применили, когда создали атрибут onclickдля элемента <p>. Этот прием считается устаревшим, но в определенных ситуациях нередко оказывается весьма полезным.

Обработчики событий как свойства

Этот подход мы применили в коде:

<script>

function clickme(){

document.getElementsByTagName('p')[0].onclick=showalert;

}

function showalert(){

alert('you clicked me!');

}

window.onload= clickme;

</script>

Двум разным элементам были назначены обработчики событий, оформленные как свойства. Обработчик события onload был зарегистрирован для окна с помощью конструкции window.onload, а обработчик события onclick был зарегистрирован для первого элемента <p> в документе с помощью селектора getElementsByTagName в строке кода document.getElementsByTagName('p')[0].onclick.

Данный прием можно рекомендовать для обеспечения совместимости со старыми браузерами, однако в приложениях HTML5 его применять не рекомендуется.

Метод addEventListener()

Использование метода addEventListener() – идеальная техника , к тому же стандартизированная в спецификации HTML5.

Данный метод принимает три аргумента:

• тип события;

• исполняемую функцию;

• булево значение.

<!DOCTYPE html>

<html lang="en">

<head>

<title>Javascript</title>

<script>

function clickme(){

var pelem = document.getElementsByTagName('p')[0];

pelem.addEventListener('click', showalert,false);

}

function showalert(){

alert('you clicked me!');

}

window.addEventListener('load', clickme,false);

</script>

</head>

<body>

<div id="main">

<p>Click Me</p>

<p>You Can't Click Me</p>

</div>

</body>

</html>

В нашем примере прослуштватель добавляется для каждого события с помощью метода addEventListener().

Третий атрибут, принимающий значение true или false, указывает, каким образом срабатывают множественные события. Например, мы прослушиваем событие onclick на двух вложенных элементах. Когда пользователь щелкает на этих элементах, два события click срабатывают в порядке , определяемом этим атрибутом. Если его значение для одного из элементов равно true, то считается, что событие для этого элемента произошло первым, а для другого - вторым по счету.

У addElementListener() существует огромное преимущество по сравнению с другими подходами для регистрации обработчика событий – он позволяет добавить неограниченное число прослушивателей для одного и того же элемента – это идеальная реализация для приложений HTML5.

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

Контрольные вопросы и задания:

1. Каковы задачи языка сценариев JavaScript?

2. Какие существуют способы внедрения кода JavaScript в документы HTML?

3. Какие существуют подходы для осуществления доступа к элементам документа из сценария JavaScript? Какие решения предлагаются в спецификации HTML5?

4. Какие существуют способы регистрации обработчика события? Что нового по этому вопросу предлагает HTML5?

Лабораторная работа №7