--- title: Events and the DOM slug: Web/API/Document_Object_Model/Events translation_of: Web/API/Document_Object_Model/Events original_slug: DOM/DOM_Reference/Events ---

Вступление

В этой главе описывается модель событий 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 не поддерживает этот метод, предлагая аналогичный {{domxref ("EventTarget.attachEvent")}} API. Для кросс-браузерной совместимости используйте одну из множества доступных библиотек JavaScript.

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

Атрибут HTML

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

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

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

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

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

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

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

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

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

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

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