Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on<событие>, например:

<input id="elem" type="button" value="Нажми меня" />

<script>

elem.onclick = function() {

alert('Спасибо');

};

</script>

Этот способ, по сути, аналогичен предыдущему. Обработчик хранится именно в DOM-свойстве, а атрибут – лишь один из способов его инициализации.

Только одно событие у свойства

Так как DOM-свойство onclick одно, то назначить более одного обработчика нельзя. В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

<input type="button" id="elem" onclick="alert('До')" value="Нажми меня" />

<script>

elem.onclick = function() { // перезапишет существующий обработчик

alert('После'); // выведется только это

};

</script>

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

function sayThanks() {

alert('Спасибо!');

}

elem.onclick = sayThanks;

Функция должна быть присвоена как sayThanks, а не sayThanks().

button.onclick = sayThanks;

Если добавить скобки, то sayThanks() – будет уже результат выполнения функции (а так как в ней нет return, то в onclick попадёт undefined). Нам же нужна именно функция, а не ее результат.

А вот в разметке как раз скобки нужны:

<input type="button" id="button" onclick="sayThanks()" />

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создает функцию из его содержимого.

Если обработчик надоел – его всегда можно убрать назначением elem.onclick = null.

Недостаток назначения через свойство

Фундаментальный недостаток описанных выше способов назначения обработчика – невозможность повесить несколько обработчиков на одно событие. Например, одна часть кода хочет делать кнопку подсвеченной, а другая – выдавать сообщение. Нужно в разных местах два обработчика повесить.

При этом новый обработчик будет затирать предыдущий. Например, следующий код на самом деле назначает один обработчик – последний:

input.onclick = function() { alert(1); }

input.onclick = function() { alert(2); } // заменит предыдущий обработчик

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

AddEventListener и removeEventListener

Методы addEventListener и removeEventListener являются современным способом назначить или удалить обработчик, и при этом позволяют использовать сколько угодно любых обработчиков.

Назначение обработчика осуществляется вызовом addEventListener с тремя аргументами:

element.addEventListener(event, handler[, phase]);

· event — Имя события, например click

· handler — Ссылка на функцию, которую надо поставить обработчиком.

· phase — Необязательный аргумент, «фаза», на которой обработчик должен сработать.

Удаление обработчика осуществляется вызовом removeEventListener:

// передать те же аргументы, что были у addEventListener

element.removeEventListener(event, handler[, phase]);

Удаление требует ту же функцию, которая была назначена. Вот так removeEventListener не сработает:

elem.addEventListener("click", function() {alert('Спасибо!')});

elem.removeEventListener("click", function() {alert('Спасибо!')});

В removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно. Вот так правильно:

function handler() {

alert('Спасибо!');

}

input.addEventListener("click", handler);

input.removeEventListener("click", handler);

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

<input id="elem" type="button" value="Нажми меня"/>

<script>

function handler1() {

alert('Спасибо!');

};

function handler2() {

alert('Спасибо ещё раз!');

}

elem.onclick = function() { alert("Привет"); };

elem.addEventListener("click", handler1); // Спасибо!

elem.addEventListener("click", handler2); // Спасибо ещё раз!

</script>

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener. Однако, во избежание путаницы, рекомендуется выбрать один способ.