Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Вступление

Вступление

В этой главе описывается модель событий DOM. Топ скрыть Интерфейс сам по себе описано, а также интерфейсы для регистрации событий на узлах в DOM, Также а слушатели события Главного , Также а Несколько больше Примеры, которые показывают, как Различные интерфейсы связаны друг события Главного с другом.

Существует отличная диаграмма, которая четко объясняет события трех этапов через DOM в проекте DOM Level 3 Events .

Также см. Пример 5: Распространение событий в главе «Примеры» для более подробного примера.

Регистрация слушателей событий

Есть 3 способа регистрации обработанных событий для элемента DOM.

EventTarget.addEventListener

// Предполагая, что myButton является элементом кнопки
myButton.addEventListener ('click', greet, false);
function greet (event) {
    // распечатать и посмотреть на объект события 
    // всегда печатать аргументы в случае пропуска любых других аргументов
    console.log ('greet:', arguments);
    оповещение («Привет, мир»);     
}

Это метод, который вы должны использовать на современных веб-страницах.

Примечание. Internet Explorer 6-8 не поддерживает этот метод, предлагая аналогичный EventTarget.attachEvent API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.

Дополнительную информацию можно найти на справочной странице EventTarget.addEventListener.

Атрибут HTML

<button onclick = "alert ('Hello world!')">

Код JavaScript в атрибуте передается объекту Event через eventпараметр. Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML .

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

Свойства элемента DOM

// Предполагая, что myButton является элементом кнопки
myButton.onclick = function(event){alert('Hello world');};

Функция может быть определена для получения eventпараметра. Возвращаемое значение обрабатывается особым образом, описанным в спецификации HTML .

Проблема этого метода в том, что для каждого элемента и для каждого события может быть установлен только один обработчик.

Доступ к интерфейсам событий

Обработчики событий могут быть присоединены к различным объектам, включая элементы DOM, документ, объект окна и т. Д. Когда происходит событие, объект события создается и последовательно передается слушателям события.

Интерфейс Event доступен из функции-обработчика через объект события, переданный в качестве первого аргумента. В следующем простом примере показано, как объект события передается в функцию-обработчик события и может использоваться из одной такой функции.

function print(evt) {
  // параметру evt автоматически назначается объект события
  // позаботимся о различиях в console.log и alert
  console.log('print:', evt);
  alert(evt); 
}
// любая функция должна иметь подходящее имя, это то, что называется семантическим
table_el.onclick = print;    

Метки документа и участники

Внесли вклад в эту страницу: SphinxKnight
Обновлялась последний раз: SphinxKnight,