Добавляем...


Привязка обработчиков событий к объектам
В DOM уровня 2 привязать обработчики событий к элементам проще всего с помощью атрибутов (Х)НТМL типа onclick, о которых вы должны уже к этому моменту знать. То же самое годится и для браузеров, поддерживающих DOM2, за исключением того, что гарантируется только поддержка событий, стандартных для (X)HTML (хотя некоторые браузеры поддерживают больше событий).
Поскольку в DOM2 нет официального способа получения доступа к объекту Event для сценария в тексте атрибута обработчика события, более предпочтительным для связывания оказывается использование JavaScript. При этом используется синтаксис, аналогичный тому, который предлагался для базовой модели событий:

<p id="myElement">Нажми здесь</p>
<p>А не здесь</p>

<script type="text/javascript">
<!--
function handleClick(e)
{
alert("Щелчек получен: " + e);
// IE5&6 покажут undefined поскольку они не поддерживают DOM2
}
document.getElementById("myElement").onclick = handleClick;
//-->
</script>

Обратите внимание на то, как в этом примере обработчик событий принимает аргумент. Браузеры с поддержкой DOM2 передают обработчику объект Event, содержащий дополнительную информацию о произошедшем событии. Имя аргумента произвольно, но чаще всего используются "event", "е" или "evt". Мы собираемся обсудить объект Event более подробно в одном из следующих разделов.
Методы привязки событий DOM2
Для добавления в страницу обработчика событий можно использовать новый метод addEventListener(), предлагаемый DOM2. Имеются три причины для использования этой функции вместо непосредственной установки свойства обработчика событий для объекта. Во-первых, вы получаете возможность привязать к объекту сразу несколько обработчиков событий для одного и того же события. Когда обработчики событий привязаны таким образом, при наступлении соответствующего события происходит вызов каждого из обработчиков, но порядок их вызова произволен. Второй причиной использования addEventListener() является то, что при этом имеется возможность обработать события в течение фазы захвата (когда событие "спускается" к цели). Обработчики событий, привязанные к атрибутам типа onclick или onsubmit, вызываются только в фазе возврата. Третьей причиной является то, что указанный метод предоставляет возможность привязать обработчик событий к текстовому узлу, что было невозможно до появления DOM2.
Синтаксис использования метода addEventListener() следующий:

объект.addEventListener(«событие», обработчик, фазаЗахвата);
  • объект задает узел, к которому привязывается приемник события;
  • "событие"соответствует событию, которое должно отслеживаться;
  • обработчик задает функцию, которая должна вызываться, когда происходит соответствующее событие;
  • фазаЗахвата является логическим значением, указывающим, когда должен вызываться обработчик событий — в фазе захвата (true) или в фазе возврата (false).
Например, чтобы назначить функцию changeColor() на роль обработчика событий mouseover в фазе захвата для абзаца с id, равным myText, укажите

document.getElementById('myText').addEventListener("mouseover", change-Color, true);

а чтобы добавить обработчик событий swaplmage() в фазе возврата, используйте

document.getElementById('myText').addEventListener("mouseover", swaplmage, false);

Обработчики событий убираются с помощью removeEventListener() с теми же аргументами, что и при их добавлении. Так, чтобы исключить первый обработчик событий из предыдущего примера (но сохранить второй), нужно использовать

document.getElementById('myText').removeEventListener("mouseover", changeColor, true);

Вы найдете примеры использования addEventListener() немного позже в этой главе.
назад:
далее: Объекты событий


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика