1. Home
  2. JavaScript HTML DOM EventListener

Лучшее руководство по JavaScript HTML DOM EventListener в 2024 году. В этом руководстве вы можете изучить Метод addEventListener (),примеров,грамматика,Оригинальные элементы добавить обработчик событий,примеров,примеров,Добавление нескольких обработчиков событий к одному элементу,примеров,примеров,Добавьте обработчик события к объекту Window,примеров,Передача параметров,примеров,Захват событий или восходящей цепочки события?,примеров,Метод removeEventListener (),примеров,Поддержка браузеров,примеров,Ссылка на объект HTML DOM Event,

JavaScript HTML DOM EventListener

Метод addEventListener ()

примеров

Прослушивание событий запускается, когда пользователь нажимает на кнопку:

. Document.getElementById ( "myBtn") addEventListener ( "щелчок", displayDate);

Попробуйте »

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

Метод addEventListener (), чтобы добавить обработчик событий не переписывает существующий обработчик событий.

Вы можете добавить несколько обработчиков событий к одному элементу.

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

Вы можете добавлять объекты любого слушателя событий DOM, а не только элементы HTML. Такие, как: окна объекта.

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

При использовании метода addEventListener (), JavaScript HTML-теги слева, чтобы вырезать, более удобным для чтения, при отсутствии контроля HTML-тегов можно также добавить слушателей событий.

Вы можете использовать метод removeEventListener () для удаления слушателя событий.

грамматика

элемент .addEventListener (событие, функция, useCapture );

Первым параметром является тип (например, "щелчок" или "MouseDown") события.

Вторым аргументом является вызов функции запускается после того, как событие.

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

примечание Примечание: Не используйте "на" префикс. Например, можно использовать "щелчок", вместо "OnClick".

Оригинальные элементы добавить обработчик событий

примеров

Когда пользователь нажимает на всплывающей элемента, когда "Hello World!":

Элемент .addEventListener ( "щелчок", функция () {Alert ( "Hello World!");});

Попробуйте »

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

примеров

Когда пользователь нажимает на всплывающей элемента, когда "Hello World!":

Элемент .addEventListener ( "щелчок", MYFUNCTION );

Функция туРипсЫоп () {
предупреждение ( "Hello World!");
}

Попробуйте »

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

Метод addEventListener () позволяет добавлять несколько событий в одних и тех же элементов, и не перезаписывать существующие события:

примеров

Элемент .addEventListener ( "щелчок", MYFUNCTION );
Элемент .addEventListener ( "щелчок", mySecondFunction );

Попробуйте »

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

примеров

Элемент .addEventListener ( "Mouseover", туРипсЫоп );
Элемент .addEventListener ( "щелчок", mySecondFunction );
Элемент .addEventListener ( "MouseOut", myThirdFunction );

Попробуйте »

Добавьте обработчик события к объекту Window

Метод addEventListener () позволяет добавлять объекты в слушателе событий HTML DOM, объекты HTML DOM, такие как: HTML-элементов, HTML документы, объект окна. Объекты событий или другие расходы, такие как: объект XMLHttpRequest.

примеров

Когда пользователь сбрасывает размер окна для добавления слушателей событий:

window.addEventListener ( "размер", функция () {
. Document.getElementById ( "демо") innerHTML = SOMETEXT;
});

Попробуйте »

Передача параметров

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

примеров

Элемент .addEventListener ( "щелчок", функция () {MYFUNCTION (p1, p2);});

Попробуйте »

Захват событий или восходящей цепочки события?

Доставка событий двумя способами: пузыриться и захват.

Порядок доставки событий элементов, определенных с помощью триггера событий. Если <р> элемент в <div> элемент, элемент пользователь нажимает кнопку <р>, какой элемент события "щелчок", чтобы быть вызвано его?

Пузырящийся, событие будет внутренний элемент срабатывает, а затем вызвать внешние элементы, а именно: элемент клик событие <р> запускается первым, а затем запускает событие щелчка <DIV> элемента.

В захвате, событие будет внешний элемент срабатывает, то событие срабатывает внутренних элементов, а именно: элемент <div> , чтобы вызвать событие щелчка, а затем вызвать событие щелчка <р> элемент.

addEventListener () метод, чтобы указать параметр "useCapture", чтобы установить тип доставки:

addEventListener (событие, функция, useCapture) ;

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

примеров

. Document.getElementById ( "myDiv") addEventListener ( "щелчок", туРипсЫоп, правда);

Попробуйте »

Метод removeEventListener ()

removeEventListener () метод для удаления метод addEventListener (), чтобы добавить обработчики событий:

примеров

Элемент .removeEventListener ( "MouseMove", туРипсЫоп );

Попробуйте »

Поддержка браузеров

Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.

способ
addEventListener () 1,0 9.0 1,0 1,0 7.0
removeEventListener () 1,0 9.0 1,0 1,0 7.0

Примечание: IE 8 и более ранние версии IE, Opera 7.0 и более ранние версии не поддерживают метод addEventListener () и removeEventListener (). Тем не менее, этот тип версии браузера может быть использован метод detachEvent () для удаления обработчика событий:

element.attachEvent (событие, функция);
element.detachEvent (событие, функция);

примеров

Решение кросс-браузер:

переменная х = document.getElementById ( "myBtn");
если (x.addEventListener) {// все основные браузеры, кроме IE 8 и более ранних версий
x.addEventListener ( "щелчок", MYFUNCTION);
} Иначе, если (x.attachEvent) {// IE 8 и более ранних версий
x.attachEvent ( "OnClick", туРипсЫоп);
}

Попробуйте »

Ссылка на объект HTML DOM Event

Все события HTML DOM, вы можете увидеть наш полный HTML DOM Event Object Reference .

Горячие учебники

Contact US

JavaScript HTML DOM EventListener
10/30