JavaScript - Способы подписки на события

В этой статье мы рассмотрим различные способы, с помощью которых Вы можете подписаться на события элементов веб-страницы. Один из способов основан на использовании атрибутов HTML, два других способа осуществляются через код JavaScript посредством свойства on[event] или метода addEventListener().

На событие можно подписаться одним из следующих способов:

  • Подписаться через код HTML (не рекомендуется использовать).
  • Через код JavaScript с помощью задания элементу свойства on[событие], где [событие] - это имя определённого события.
  • Через код JavaScript с помощью специального метода addEventListener.

JavaScript - Способы подписки на событие

Данный способ основывается на использовании атрибута, который имеет вид on[событие], где [событие] - это имя определённого события.

Основные действия: добавить к элементу определённый атрибут (например: onclick - где: on означает событие, а click - вид события) со значением, содержащим оператор или функцию. Данный оператор или функция будет выполняться при наступлении этого события у элемента.

JavaScript - Подписка на событие через код HTML

Например, добавить к кнопке событие click, при наступлении которого будет выводиться сообщение с помощью метода alert:

<button onclick="alert('Событие click')" vаlue="Демонстрация события click">

Если в обработчике события надо выполнить некоторый код, то необходимо использовать функцию.

Например, выполним вышеприведённый пример с использованием функции:

<button onclick="myFunction()" value="Демонстрация события click">
<script>
//функция, которая будет вызываться при наступлении события click у указанного элемента
function myFunction() {
alert('Событие click');
}
</script>

Например, добавить к кнопке событие click, при наступлении которого выполняется указанная функция:

<button onclick="countElements()" value="Количество элементов на странице">
<script>
//функция, которая будет вызываться при наступлении события click у указанного элемента
function countElements() {
var count = document.getElementsByTagName("*").length;
alert("Количество элементов на странице:" + count.toString());
}
</script>

Данный вариант подписки на событие использовать не рекомендуется, т.к. он не только загромождает код HTML, но и имеет ограничения связанные с использованием объекта event, ключевого слово this и др.

Этот способ подписки на событие осуществляется через код JavaScript с помощью задания элементу свойства on[событие]. Основной принцип данного метода заключается в следующем:

  1. Найти элемент (объект) в DOM-дереве, на событие которого Вы хотите подписаться.
  2. Добавить найденному объекту свойство, которое должно иметь следующий вид:
    on[событие], где [событие] - это имя определённого события.
    После этого необходимо данному свойству присвоить обработчик, т.е. безымянную или некоторую указанную функцию, которая будет выполняться при наступлении этого события.

JavaScript - Подписка на событие через код JavaScript с помощью свойства

Например, подписаться на событие click элемента, имеющего id="myID". При наступлении этого события (click) выполнить его обработку с помощью безымянной функции:

<button id="myBtn" value="Демонстрация события click">
<script>
//в качестве обработчика события будем использовать безымянную функцию:
document.getElementById("myID").onclick = function {
  alert("Событие click");
}
</script>

Например, добавить к кнопке, имеющей id="myButton" событие click, при наступлении которого выполняется указанная функция:

//Найти элемент на событие, которого Вы хотите подписаться
var myButton = document.getElementById("myButton");
//добавить к объекту свойство, имеющее имя on[событие]
//при наступлении события click выполняется функция myFunction
myButton.onclick = myFunction;
//функция myFunction
function myFunction() {
  //код функции
  //...
}
Если событие задаётся через атрибут, то браузер, читая код HTML, создаёт соответствующее свойство автоматически. Т.е. браузер работает с событиями только с помощью соответствующих свойств объекта (элемента).

Если Вы подпишитесь на событие различными способами, т.е. через атрибут и с помощью свойства, то браузер в этом случае будет использовать только вариант реализации события, выполненный с помощью свойства. Подписываться на события лучше только с помощью соответствующих свойств объекта (элемента), использовать атрибуты для этих целей не рекомендуется.

Этот способ подписки на событие осуществляется через код JavaScript с помощью специального метода addEventListener. Данный способ подписки является наиболее предпочтительным и рекомендуется стандартом.

JavaScript - Подписка на событие через код JavaScript с помощью метода addEventListener

Метод addEventListener, предназначен для добавления прослушивателя (listener) определённого события (event) к элементу и выполнения обработчика (callback) при его наступлении. Кроме метода addEventListener есть ещё один метод removeEventListener, который предназначен для выполнения обратного действия, т.е. для удаления прослушивателя.

Синтаксис методов addEventListener и removeEventListener:

element.addEventListener(event, callback, phase);
element.removeEventListener(event, callback, phase);

Метод addEventListener имеет 3 параметра:

  • event (обязательный) - имя события, на которое Вы хотите подписаться (прослушивать);
  • callback (обязательный) - функция (анонимная или именованная), которая будет выполнять обработку события;
  • phase (не обязательный) - этап, на котором будет перехватываться событие. Данный параметр принимает 2 значения: true (на этапе погружения (перехвата) события) и false (на этапе всплытия события). Если данный параметр не указать, то будет использоваться значение false.

Например, использование анонимной функции для обработки события "click":

element.addEventListener("click", function {
  //...
});

Например, использование функции myFunction() для обработки события "click":

element.addEventListener("click", myFunction);
//функция myFunction
function myFunction() {
  //...
}

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

Например, добавить, а затем удалить обработчик myFunction для события mousemove объекта document:

//добавить для события mousemove объекта document обработчик, заданный в виде функции myFunction
document.addEventListener("mousemove",myFunction);
//удалить у события mousemove объекта document обработчик, заданный в виде функции myFunction
document.removeEventListener("mousemove", myFunction);

Например, подписаться на событие click документа с обработкой его в функции myFunction:

document.addEventListener("click",myFunction);
function myFunction() {
  alert("I LOVE JAVASCRIPT!");
}

Например, добавить несколько обработчиков событий, которые будут выполняться при клике в области, принадлежащей документу:

document.addEventListener("click",myFunction1);
document.addEventListener("click",myFunction2);

Например, добавить объекту document обработчики для следующих событий: click, mouseover, mouseout.

document.addEventListener("mouseover",myFunction1);
document.addEventListener("click",myFunction2);
document.addEventListener("mouseout",myFunction3);

Например, для передачи обработчику значений параметров, будем использовать анонимную функцию. В этой анонимной функции будем использовать ещё одну функцию (именованную) с помощью которой и будем передавать необходимые параметры:

document.addEventListener("click",function() { 
  myFunction(parameter1, parameter2);
});

Например, при наступлении события click в документе, изменить цвет фона элемента body. Обработчик события выполнить в виде анонимной функции.

document.addEventListner("click",function() {
  document.body.style.backgroundColor = green;
});

Работать в JavaScript с документом HTML (DOM-деревом) и обрабатывать события необходимо только после того страница полностью загрузится:

//когда вся страница загрузилась, вызываем нашу функцию pageInit
window.addEventListener( "load", pageInit);
//функция pageInit()
function pageInit() {
  //подписываемся на события
}

Вышеприведенный код можно записать более кратко, с помощью анонимной функции:

window.addEventListener( "load", function() {
//подписываемся на события
}

Более правильно работать не с событием load (происходит после полной загрузки страницы), а с событием DOMContentLoaded, которое происходит после того как браузер загрузил документ HTML и построил DOM-дерево. Т.е. для того чтобы работать с DOM-деревом нет необходимости ждать пока загрузятся все ресурсы HTML-страницы достаточно чтобы браузер построил дерево DOM.

//HTML документ загрузился и дерево DOM построено
document.addEventListener( "DOMContentLoaded", pageInit);
//функция pageInit()
function pageInit() {
  //подписываемся на события
}

Вышеприведенный код можно записать более кратко, с помощью анонимной функции:

document.addEventListener( "DOMContentLoaded", function() {
  //подписываемся на события
}

Например, подписать на событие click сразу все элементы p. Обработку события выполнять с помощью функции myFunction():

document.addEventListener( "DOMContentLoaded", function() {
  var elementsP = document.getElementsByTagName("P");
  for (var i=0; i < elementsP.length, i++) { 
    elementsP[i].addEventListener("click", myFunction);
  }
}
//функция myFunction()
function myFunction() {
  //...
}


   JavaScript и jQuery 0    3024 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.