Написание обработчиков событий
Как видно из предыдущих примеров, обработчики событий можно использо-
вать как атрибуты тегов:
<span style="color: red" onclick="f_print(‘Событие onclick - SPAN’, event);">
здесь</span>
Но это не единственный вариант написания обработчиков. Написать обра- ботчик можно с помощью параметров for и event тега <script> (листинг 3.38). Для этого элемент Web-страницы должен иметь параметр id. Обратите вни- мание, что параметр id может иметь большинство тегов. В параметре for
указывается id элемента страницы, для которого создается обработчик, а в параметре event указывается обрабатываемое событие.
Листинг 3.38.
<!- Работает только в Internet Explorer !!! ->
<html>
<head>
<title>Обработчик события</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript" for="txt" event="onclick">
<!-
window.alert(‘Вы кликнули на слове "здесь"’);
//->
</script>
</head>
<body>
<p>Щелкните мышью
<span style="color: red" id="txt">здесь</span>
</p>
</body>
</html>
Можно назначить обработчик с помощью указателя функции (листинг 3.39). Нужно отметить, что имя функции обязательно должно быть указано без скобок и дополнительных атрибутов.
Листинг 3.39. Обработчик с помощью указателя функции
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Обработчик события</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
<script type="text/javascript">
<!-
function f_click(e) {
e = e || window.event;
window.alert(‘Вы кликнули на слове "здесь"’);
// this - это ссылка на элемент, вызвавший событие
this.innerHTML = "новый текст";
// Прерывание всплывания событий
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true; // Для IE
}
//->
</script>
</head>
<body>
<p onclick="window.alert(‘Событие onclick - Абзац’);">
Щелкните мышью
<span style="color: red" id="txt">здесь</span>
</p>
<script type="text/javascript">
<!-
// Обратите внимание: название функции указывается без скобок !!!
document.getElementById("txt").onclick = f_click;
//->
</script>
</body>
</html>
Кроме того, обработчик можно написать, используя анонимную функцию
(листинг 3.40).
Листинг 3.40. Обработчик с использованием анонимной функции
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Обработчик события</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251">
</head>
<body>
<p onclick="window.alert(‘Событие onclick - Абзац’);">
Щелкните мышью
<span style="color: red" id="txt">здесь</span>
</p>
<script type="text/javascript">
<!-
// Использование анонимной функции
document.getElementById("txt").onclick = function(e) {
e = e || window.event;
window.alert(‘Вы кликнули на слове "здесь"’);
// this - это ссылка на элемент, вызвавший событие
this.innerHTML = "новый текст";
// Прерывание всплывания событий
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
//->
</script>
</body>
</html>
Назначить обработчик события в модели DOM Level 2 позволяет метод addE- ventListener(). Формат метода:
<Элемент>.addEventListener(<Событие>, <Ссылка на функцию>, <Перехват>);
Удалить обработчик события можно с помощью метода removeEventLis- tener(). Формат метода:
<Элемент>.removeEventListener(<Событие>, <Ссылка на функцию>,
<Перехват>);
В параметре <Событие> указывается название события без префикса "on", на- пример, click вместо onclick. Ссылка на функцию-обработчик указывается во втором параметре. В эту функцию в качестве аргумента передается ссылка на объект event, а внутри функции через ключевое слово this доступна
ссылка на текущий элемент. Если в параметре <Перехват> указать значение true, то событие будет перехватываться на этапе всплывания от вложенных элементов, а если false — то обрабатывается событие самого элемента. Что- бы понять смысл этого параметра, рассмотрим пример:
<div><span id="span1">span1
<span id="span2">Щелкните здесь (span2)</span></span>
</div>
<script type="text/javascript">
function f_click(e) { // e - ссылка на объект event window.alert("Элемент " + this.getAttribute("id") +
". Событие возникло в " + e.target.getAttribute("id"));
}
if (document.addEventListener) { // В IE не работает
var span1 = document.getElementById("span1"); var span2 = document.getElementById("span2"); span1.addEventListener("click", f_click, true); span2.addEventListener("click", f_click, false);
}
</script>
При щелчке на фразе "Щелкните здесь" возникнет последовательность событий:
Элемент span1. Событие возникло в span2
Элемент span2. Событие возникло в span2
Таким образом, событие, возникшее во вложенном элементе, вначале обраба- тывается элементом-родителем, а затем самим элементом. Если заменить true на false, то последовательность будет другой:
Элемент span2. Событие возникло в span2
Элемент span1. Событие возникло в span2
Это нормальная последовательность всплывания событий, которую мы рас- сматривали в разд. 3.16.7. Именно значение false используется в большин- стве случаев.
В качестве еще одного примера рассмотрим назначение обработчика для всех кнопок (type="button"), а также реализацию обработчика, отрабатывающего только один раз:
<input type="button" id="btn1" value="Кнопка 1">
<input type="button" id="btn2" value="Кнопка 2">
<script type="text/javascript">
function f_click1(e) { // e - ссылка на объект event
// Сработает при каждом щелчке на любой кнопке
window.alert("Обработчик 1. Кнопка " + e.target.getAttribute("id"));
}
function f_click2() { // Сработает только 1 раз
window.alert("Обработчик 2");
// Удаление обработчика
// this - ссылка на текущий элемент
this.removeEventListener("click", f_click2, false);
}
if (document.addEventListener) { // В IE не работает var tags = document.getElementsByTagName("input"); for (var i=0, len=tags.length; i<len; i++) {
if (tags[i].type=="button")
tags[i].addEventListener("click", f_click1, false);
}
var elem = document.getElementById("btn1");
elem.addEventListener("click", f_click2, false);
}
</script>
Web-браузер Internet Explorer не поддерживает методы addEventListener() и removeEventListener(). Для назначения обработчика в этом Web-браузере, начиная с пятой версии, предназначен метод attachEvent(). Формат метода:
<Элемент>.attachEvent(<Событие>, <Ссылка на функцию>);
Удалить обработчик события можно с помощью метода detachEvent().
Формат метода:
<Элемент>.detachEvent(<Событие>, <Ссылка на функцию);
В параметре <Событие> указывается название события c префиксом "on", на- пример, onclick. Ссылка на функцию-обработчик указывается во втором па- раметре. В эту функцию в качестве аргумента передается ссылка на объект event. Обратите внимание на то, что внутри функции ключевое слово this ссылается на объект window, а не на текущий элемент.
Переделаем наш предыдущий пример и используем методы attachEvent() и
detachEvent() для назначения и удаления обработчиков:
<input type="button" id="btn1" value="Кнопка 1">
<input type="button" id="btn2" value="Кнопка 2">
<script type="text/javascript">
function f_click1(e) {
// Сработает при каждом щелчке на любой кнопке
window.alert("Обработчик 1. Кнопка " + e.srcElement.id);
}
function f_click2() { // Сработает только 1 раз
window.alert("Обработчик 2");
// Удаление обработчика
var elem = document.getElementById("btn1");
elem.detachEvent("onclick", f_click2);
}
if (document.attachEvent) { // Работает в IE 5+, Opera 9.02 var tags = document.getElementsByTagName("input");
for (var i=0, len=tags.length; i<len; i++) {
if (tags[i].type=="button")
tags[i].attachEvent("onclick", f_click1);
}
var elem = document.getElementById("btn1");
elem.attachEvent("onclick", f_click2);
}
</script>
До пятой версии в Internet Explorer можно назначать обработчики только как параметры тегов или присваиванием ссылки на функцию свойству- обработчику элемента документа. В этом случае объект event не передается в качестве параметра. Вместо него следует использовать глобальное свойство event объекта window.
Для примера рассмотрим кроссбраузерный вариант назначения обработчика для события onload:
function f_load(e) {
var e = e || window.event; // Объект event window.alert("Событие onload");
}
if (window.addEventListener) { // DOM Level 2 window.addEventListener("load", f_load, false);
}
else if (window.attachEvent) { // IE 5+
window.attachEvent("onload", f_load);
}
else window.onload = f_load; // IE 4-
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)