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