addEventListener()

Поддержка браузерами


12.0+	9.0+	1.0+	1.0+	7.0+	1.0+

Описание

Метод addEventListener() регистрирует обработчик события для целевого объекта (eventTarget), для которого он будет вызываться при возникновении события. Целевым объектом может быть объект Element, Document, Window или любой другой объект поддерживающий события, например, такой как XMLHttpRequest.

Синтаксис

eventTarget.addEventListener(тип_события, обработчик, фаза);

Аргументы

тип_события: строка, указывающая тип события для которого регистрируется обработчик. Тип события указывается без префикса "on".
обработчик: функция выражение или имя функции, которая должна вызываться при возникновении события, указанного типа.
фаза: булево значение, которое определяет, для какой фазы распространения события будет зарегистрирован обработчик. Возможные значения:
- true - регистрирует обработчик события для фазы перехвата.
- false - регистрирует обработчик события для фазы всплытия.

Возвращаемое значение

Нет.

Примечание: метод addEventListener() можно вызвать более одного раза и зарегистрировать с его помощью несколько разных обработчиков событий для одного и того же типа события в том же самом целевом объекте. При возникновении события в объекте будут вызваны все обработчики, зарегистрированные для указанного типа события, в порядке их регистрации.

<script>
  var div = document.getElementById('one');
  div.addEventListener('click', foo1, false);
  div.addEventListener('click', foo2, false);
  div.addEventListener('click', foo3, false);

  function foo1() { alert('1'); }
  function foo2() { alert('2'); }
  function foo3() { alert('3'); }
</script>

Попробовать »

Пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
    #one {
      background-color: #99c2ff;
      height: 150px;
      width: 150px;
    }
  </style>
</head>
<body>

  <div id="one"></div>

  <script>
   var div = document.getElementById('one');
    div.addEventListener('click', foo, false);

    function foo() { alert('Hi!'); }
  </script>

</body>
</html>

Попробовать »