Слушатели событий JavaScript

Новые возможности JavaScript для обработки событий - это прослушивание событий. Прослушивание событий监视ает события на элементе.

Мы будем использоватьaddEventListener()для замены прямого назначения событий свойствам элементов.

метод addEventListener()

addEventListener()Метод добавляет обработчик событий к указанному элементу.

Мы можем переписать пример случайного цвета (из предыдущей главы), например:

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}

Мы по-прежнему используем сранеесхожиеbgChange()Функция. Мы будемaddEventListener()Метод добавляется к кнопке.

addEventListener() принимает два обязательных параметра - событие, которое нужно监听, и функцию-回调.

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

Грамматика:

element.addEventListener(event, listener, useCapture)

Первый параметр - это тип события (например, «click» или «mousemove»).

Второй параметр - это функция-слушатель, которую мы вызываем при возникновении события.

Третий параметр - это булево значение,指定 использовать ли событие bubbles или capture. Этот параметр является опциональным.

Добавьте прослушивание событий к элементу

Обратите внимание, что все коды должны быть размещены вaddEventListener()Анонимные функции в методах очень подходящие, например:

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

Вы также можете ссылаться на внешние "именованные" функции:

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}

Добавление нескольких слушателей событий к одному элементу

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

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);

Мы можем добавить различные типы событий к элементам:

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);

передавать параметры

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

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

добавить слушатель событий к объекту Window

Кроме того, вы можетеaddEventListener()вдокументиокнообъекте.

В этом примере используется следующееaddEventListener()метод добавляет событие click к документу:

document.addEventListener("click", function() {
alert("Hello World!!!");
});

В этом примере используетсяaddEventListener()метод добавляет событие resize к окну:

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

В настоящее время, прослушивание событий является наиболее распространенным и предпочтительным способом обработки событий в JavaScript.

метод removeEventListener()

Можно также использоватьremoveEventListener()Метод удаляет один или все события из элемента.

var box = document.getElementById("para");
// Attach an event handler to a P element with id="para"
box.addEventListener("mousemove", myFunc);
// Удаление обработчика событий из элемента P с id="para"
box.removeEventListener("mousemove", myFunc);

Первый параметр - это тип события (например, «click» или «mousemove»).

Второй параметр - это функция, которую мы вызываем при возникновении события.

Больше для чтения

Справочник JavaScript:Справочник по объектам событий HTML DOM