Оглавление

16.9. Написание обработчиков событий

Как видно из предыдущих примеров, обработчики событий можно использовать как атрибуты тегов: 

   <span style="color: red" onclick="f_print('Событие onclick - SPAN', event);">  

   здесь</span>


Но это не единственный вариант написания обработчиков. Написать обработчик можно с помощью параметров for и event тега <script> (листинг 38). Для этого элемент Web-страницы должен иметь параметр id. Обратите внимание, что параметр id может иметь большинство тегов. В параметре for указывается id элемента страницы, для которого создается обработчик, а в параметре event указывается обрабатываемое событие.

 

Листинг 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>

 

Можно назначить обработчик с помощью указателя функции (листинг 39). Нужно отметить, что имя функции обязательно должно быть указано без скобок и дополнительных атрибутов.

 

Листинг 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>

 

Кроме того, обработчик можно написать, используя анонимную функцию (листинг 40).

 

Листинг 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 позволяет метод addEventListener(). Формат метода:
<Элeмeнт>.addEventListener(<Событие>, <Ссылка на функцию>, <Перехват>);


Удалить обработчик события можно с помощью метода removeEventListener(). Формат метода:
<Элeмeнт>.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
   Элемент spanl. Событие возникло в span2


Это нормальная последовательность всплывания событий, которую мы рассматривали в разд. 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(<Событие>, <Ссылка на функцию);


В параметре <событие> указывается название события с префиксом "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-
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити