Приднестровская поддержка XOOPS
Как видно из предыдущих примеров, обработчики событий можно использовать как атрибуты тегов:
<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-
Отправитель | Нити |
---|
3 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |