Напомню, что событие – это реакция браузера на взаимодействие пользователя с элементами сайта, посредством мыши и клавиатуры. Существует три способа, как повесить событие ( event ) на элемент. Через обработчик в HTML теге При клике по кнопке, вызывается функция по её имени. <button value="Submit" onclick="open()"> <...
Напомню, что событие – это реакция браузера на взаимодействие пользователя с элементами сайта, посредством мыши и клавиатуры. Существует три способа, как повесить событие (event) на элемент.
Через обработчик в HTML теге
При клике по кнопке, вызывается функция по её имени.
<button value="Submit">
<script>
function open() {
alert("Клик по кнопке" );
}
</script>
Этот способ уже давно устарел и не используется программистами в написании кода для реальных проектов. Обработчик onclick жестко прикрепился к кнопке, убрать его оттуда можно только вручную. А что если таких кусков кода много?
Через свойство DOM-объекта
Второй способ аналогичен первому и все ещё широко используется в программировании. Разница в том, что мы к элементу обращаемся через идентификатор, класс, атрибут или по названию тега.
<button id="button" value="Submit">
<script>
button.onclick = function() {
alert( 'Клик по кнопке' );
}
</script>
Но у второго способа есть один большой минус – на элемент можно повесить только один обработчик события.
Эти 2 способа имеют место быть, но они не совершенные. Ну уж третий то способ наверняка хороший – подумает читатель. Иначе, зачем было критиковать первые два, если не ради пиара третьего – addEventListener? Сейчас мы это увидим.
Метод addEventListener
Метод addEventListener лишен недостатков предыдущих двух способов: Для удаления события, не надо взаимодействовать с HTML разметкой, а красиво написать.
function open() {
alert( 'Привет!' );
}
btn.addEventListener("click", open);
btn.removeEventListener("click", open);
На один элемент с событием можно повесить несколько обработчиков.
<button id="btn" value="Submit">
<script>
function hello1() {
alert('Hello Vova!');
}
function hello2() {
alert('Hello Alex!');
}
btn.onclick = function() { alert("Hello"); };
btn.addEventListener("click", hello1); // Hello Vova!
btn.addEventListener("click", hello2); // Hello Alex!
</script>
С помощью addEventListener можно повесить событие на элементы, не являющиеся HTML-элементами – например, окончание анимации и окончание срабатывания transitionend. Это не элемент, его нельзя получить с помощью команды document, но зато можно через addEventListener.
btn.addEventListener("transitionend", function() {
alert( "это было круто" );
});
Недостатки
В старых браузерах вместо addEventListener, используют другие методы, а вместо click, первым параметром передается onclick.
function name() {
alert( 'Привет!' );
}
btn.attachEvent("onclick", name) // повесить
btn.detachEvent("onclick", name) // удалить
Практический пример
Смена фона у кнопки:
<button id="button">Try it</button>
<script>
document.getElementById("button").addEventListener("click", function(){
this.style.backgroundColor = "black";
});
</script>
