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

Первый способ — inline, прямо в HTML:

<a href="https://100.org.ua" onclick="alert(event.type)">Click</a>

Второй способ — свойство on[событие] в объекте DOM:

<script type="text/javascript">

var element = document.getElementById("test");

element.onclick = function(event){alert("Hello")};

</script>

Третий способ — специальные методы (W3C и Internet Explorer как обычно имеют свои и друг с другом не пересекаются, то есть этот метод не универсален и не кроссбраузерный):

<script type="text/javascript">

var element = document.getElementById("test");

function clickFunc(){

    alert("Internet Explorer standart");

}

function clickFuncNew(event){

   alert("W3C standart");

}

element.attachEvent("onclick", clickFunc); //Internet Explorer — добавление обработчика события onclick

//заметьте, тут мы указываем именно имя функции, а не анонимную функцию, так правильно, иначе мы не сможем задействовать нижеследующий метод

element.detachEvent("onclick", clickFunc); //Internet Explorer — удаление этого же обработчика события onclick

 

element.addEventListener("click", clickFuncNew,  false); //W3C — добавление обработчика события onclick, но само событие мы указываем без префикса "on"

//третий параметр — момент вызова обработчика: true — на фазе "перехвата", false — на фазе "всплытия" (как в Internet Explorer)

element.removeEventListener("click", clickFuncNew, false); //W3C — удаление обработчика события onclick, как и выше, событие без префикса "on", третий параметр — то же самое

</script>

Специальные методы, в отличие от первых двух, позволяют добавлять сколько угодно обрабочиков на одно и то же событие одного и того же элемента DOM.

В отличие от реализации Internet Explorer, W3C позволяет также управлять фазой срабатывания обработчика (третий параметр метода element.addEventListener(), element.removeEventListener()) — на стадии "перехвата" (true) или на стадии "всплытия" (false). Это также еще и потому, что только W3C реализует и то и другое (и перехват и всплытие).

Перехват — событие срабатывает от самого "верхнего" (родительского) элемента до самого "глубокого" (дочернего).

Всплытие — событие срабатывает от самого "глубокого" (дочернего) элемента до самого "верхнего" (родительского), то есть, наоборот от Перехвата.

Событие — event

Если вы заметили, в обработчик addEventListener(event) первым аргументом всегда передается объект события, чего нет в методе attachEvent() в Internet Explorer. Этот объект несет в себе много полезной информации (об этом есть много отдельных статей), итак, кроссбраузерный вариант использования специальных методов для добавления обработчиков на события:

 <script type="text/javascript">

function clickFunc(event){

    event = event || window.event; //если не передан event — берез глобальных, что свойственно Internet Explorer-у

    alert(event.type); //выводим тип события

}

var element = document.getElementById("test");

element.addEventListener ? element.addEventListener("click", clickFunc, false) : element.attachEvent("onclick", clickFunc);

//Если не существует метода addEventListener() в элементе DOM, значит это Internet Explorer, будем использовать его метод

</script>

Несколько слов об обработчиках, которые по умолчанию вешаются браузерами на определенные события, например <a href="https://100.org.ua/">Click me</a>. Если кликнуть на этом элементе — вы перейдете по указанному в аттрибуте href="…" адресу. Иногда (я бы сказал очень часто) необходимо предотвратить такое поведение браузера, для этого существуют методы объекта event:

event.preventDefault(); //W3C — предотвращает срабатывание обработчика браузера по умолчанию на событие

​event.returnValue = false; //Internet Explorer — то же самое

//кроссбраузерный вариант:

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

Также несколько слов о прекращении "всплытия" события. Иногда в наших скриптах (я бы сказал, чаще всего) необходимо прекратить выполнение обработчиков данного события по цепочке на конкретно ткущем элементе. Но всплытие будет происходить всегда, конечно же, если его не остановить специальным методом объекта event (иначе о чем мы тут говорим :)):

event.stopPropagation(); //W3C — прекращает всплытие

event.cancelBubble = true; //Internet Explorer — то же самое

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //кроссбраузерный вариант

Ну вот собственно и все, коротко об обработчиках событий в JavaScript.

Веселого всем программирования!

Добавить комментарий