Метод HTML DOM addEventListener ()
примеров
Добавить событие щелкните в документе. Когда пользователь нажимает кнопку в любом месте документа, идентификатор = "демо" из <р> выходной элемент "Hello World":
. Document.getElementById ( "демо") innerHTML = "Hello World";
});
Попробуйте »
Определение и использование
Метод document.addEventListener () используется для добавления обработчика событий к документу.
Совет: Вы можете использовать document.removeEventListener () метод , чтобы удалить метод addEventListener () для добавления обработчиков событий.
Совет: Используйте . Элемент addEventListener () Метод указанный элемент в обработчик событий.
Поддержка браузеров
Цифры в таблице представляют собой первый браузер, поддерживающий номер версии метода.
| способ | |||||
|---|---|---|---|---|---|
| addEventListener () | 1,0 | 9.0 | 1,0 | 1,0 | 7.0 |
Примечание: Internet Explorer 8 и более ранних версиях IE не поддерживает метод addEventListener (), Opera 7.0 и более ранние версии не поддерживают Opera. Тем не менее, этот тип версии браузера можно использовать метод attachEvent () , чтобы добавить обработчик событий (вопросы кроссбраузерность можно просматривать "больше примеров").
грамматика
Параметр Значение
| параметры | описание |
|---|---|
| событие | Обязательный параметр. Имя Строка описания события. Примечание: Не используйте "на" префикс. Например, можно использовать "щелчок" вместо "OnClick". Подсказка: Все события HTML DOM, вы можете увидеть наш полный HTML DOM Event Object Reference . |
| функция | Обязательный параметр. В нем описываются функции после того, как событие вызвало. Когда событие инициируется, объект события в качестве первого аргумента передается функции. объект Тип события зависит от конкретного случая. Например, "щелчок" принадлежит событие MouseEvent (событие мыши) объект. |
| useCapture | Необязательно. Логическое значение, указывающее, является ли выполнение событий в захвате или фазы восходящей цепочки. Возможные значения:
|
технические детали
| версия DOM: | Уровень DOM 2 Events |
|---|---|
| Возвращает: | Нет возвращаемого значения |
| Записи: | В Firefox 6 и Opera 11.60 в useCapture параметр является необязательным. (В Chrome, IE и Safari всегда была по желанию). |
Другие примеры
примеров
Вы можете быть отнесены к внешней функции имени функции:
Функция туРипсЫоп () {
. Document.getElementById ( "демо") innerHTML = "Hello World";
}
Попробуйте »
примеров
Вы можете добавить столько событий, в документе, добавляя событие не приведет к перезаписи существующего события.
Этот пример демонстрирует, как добавить событие щелчка в двух документах:
document.addEventListener ( "щелчок", someOtherFunction);
Попробуйте »
примеров
Вы можете добавить различные типы событий в документе.
Этот пример показывает, как добавить несколько событий в документе:
document.addEventListener ( "щелчок", someOtherFunction);
document.addEventListener ( "MouseOut", someOtherFunction);
Попробуйте »
примеров
При передаче значения параметра, используйте вызов функции с параметрами "анонимной функции":
туРипсЫоп (p1, p2);
});
Попробуйте »
примеров
Изменить <тело> элемент фона:
document.body.style.backgroundColor = "красный";
});
Попробуйте »
примеров
С помощью метода removeEventListener () для удаления через addEventListener () метод, чтобы добавить обработчики событий:
document.addEventListener ( "MouseMove", туРипсЫоп);
// Удалить обработчик событий документа
document.removeEventListener ( "MouseMove", туРипсЫоп);
Попробуйте »
примеров
Если ваш браузер не поддерживает метод addEventListener (), вы можете использовать метод attachEvent () вместо этого.
Следующий пример демонстрирует решение кросс-браузер:
document.addEventListener ( "щелчок", MYFUNCTION);
} Иначе, если (document.attachEvent) {// IE 8 и более ранние версии IE
document.attachEvent ( "OnClick", туРипсЫоп);
}
Попробуйте »
Похожие страницы
JavaScript учебник: HTML , DOM - EventListener
JavaScript Справочное руководство: Элемент .addEventListener ()