Метод eventtarget.addeventlistener()

Движение мыши

Каждый раз, когда перемещается курсов мыши, срабатывает событие «mousemove» из набора JavaScript mouse events. Оно может быть использовано для отслеживания положения мыши. Это применяется при реализации возможности перетаскивания элементов мышью.

В следующем примере программа выводит на экран панель и устанавливает обработчики событий таким образом, что при перетаскивании эта панель становится уже или шире:

<p>Потяните за край панели, чтобы изменить ее ширину:</p>
<div style="background: orange; width: 60px; height: 20px">
</div>
<script>
  var lastX; // Отслеживает последнюю позицию X мыши
  var rect = document.querySelector("div");
  rect.addEventListener("mousedown", function(event) {
    if (event.which == 1) {
      lastX = event.pageX;
      addEventListener("mousemove", moved);
      event.preventDefault(); // Предотвращает выделение
    }
  });

  function buttonPressed(event) {
    if (event.buttons == null)
      return event.which != 0;
    else
      return event.buttons != 0;
  }
  function moved(event) {
    if (!buttonPressed(event)) {
      removeEventListener("mousemove", moved);
    } else {
      var dist = event.pageX - lastX;
      var newWidth = Math.max(10, rect.offsetWidth + dist);
      rect.style.width = newWidth + "px";
      lastX = event.pageX;
    }
  }
</script>

Обратите внимание, что обработчик «mousemove» зарегистрирован для всего окна. Даже если во время изменения размеров мышь выходит за пределы панели, мы все равно обновляем ширину панели и прекращаем JavaScript touch events, когда клавиша мыши была отпущена

Мы должны прекратить изменение размера панели, когда пользователь отпускает клавишу мыши. К сожалению, не все браузеры устанавливают для событий «mousemove» свойство which. Существует стандартное свойство buttons, которое предоставляет аналогичную информацию, но оно также поддерживается не во всех браузерах. К счастью, все основные браузеры поддерживают что-то одно: либо buttons, либо which. Функция buttonPressed в приведенном выше примере сначала пытается использовать свойство buttons, и, если оно не доступно, переходит к which.

Когда курсор мыши наводится или покидает узел, запускаются события «mouseover» или «mouseout«. Они могут использоваться для создания эффектов при наведении курсора мыши, вывода какой-нибудь подписи или изменения стиля элемента.

Чтобы создать такой эффект, недостаточно просто начать его отображение при возникновении события «mouseover» и завершить после события «mouseout«. Когда мышь перемещается от узла к одному из его дочерних элементов, для родительского узла происходит событие «mouseout«. Хотя указатель мыши не покинул диапазон распространения узла.

Что еще хуже, эти JavaScript event распространяются так же, как и другие события. Когда мышь покидает один из дочерних узлов, для которого зарегистрирован обработчик, возникнет событие «mouseout«.

Чтобы обойти эту проблему, можно использовать свойство объекта события relatedTarget. В случае возникновения события «mouseover» оно указывает, на какой элемент был наведен курсор мыши до этого. А в случае возникновения «mouseout» — к какому элементу перемещается указатель. Мы будем изменять эффект наведения мыши только, когда relatedTarget находится вне нашего целевого узла.

В этом случае мы изменяем поведение, потому что курсор мыши был наведен на узел из-за его пределов (или наоборот):

<p>Наведите курсор мыши на этот <strong>абзац</strong>.</p>
<script>
  var para = document.querySelector("p");
  function isInside(node, target) {
    for (; node != null; node = node.parentNode)
      if (node == target) return true;
  }
  para.addEventListener("mouseover", function(event) {
    if (!isInside(event.relatedTarget, para))
      para.style.color = "red";
  });
  para.addEventListener("mouseout", function(event) {
    if (!isInside(event.relatedTarget, para))
      para.style.color = "";
  });
</script>

Функция isInside отслеживает родительские связи заданного узла или пока не будет достигнута верхняя часть документа (когда node равен нулю). Либо не будет найден родительский элемент, который нам нужен.

Эффект наведения гораздо проще создать с помощью псевдоселектора CSS :hover, как показано в следующем примере. Но когда эффект наведения предполагает что-то более сложное, чем просто изменение стиля целевого узла, тогда нужно использовать прием с использованием событий «mouseover» и «mouseout» (JavaScript mouse events):

<style>
  p:hover { color: red }
</style>
<p>Наведите курсор мыши на этот <strong>абзац</strong>.</p>

Определение и применение

JavaScript метод addEventListener() объекта EventTarget позволяет зарегистрировать обработчик событий определенного типа для конкретной цели.

В качестве цели могут выступать как такие объекты как Element, Document, Window, или любые другие объекты, которые поддерживают события, например, такой объект как XMLHttpRequest, который широко используется в асинхронных запросах AJAX (от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML»), что позволяет конкретной странице обновлять только её часть, не нарушая при этом работу пользователя.

Обращаю Ваше внимание на то, что Вы можете использовать метод removeEventListener() для удаления обработчика событий, присоединенного с помощью метода addEventListener()

More Examples

Example

You can also refer to an external «named» function:

document.addEventListener(«click», myFunction);function myFunction() {  document.getElementById(«demo»).innerHTML = «Hello World»;
}

Example

You can add many events to the document, without overwriting existing events.

This example demonstrates how to add two click events to the document:

document.addEventListener(«click», myFunction);document.addEventListener(«click», someOtherFunction);

Example

You can add events of different types to the document.

This example demonstrates how to add many events to the document:

document.addEventListener(«mouseover», myFunction);document.addEventListener(«click», someOtherFunction);
document.addEventListener(«mouseout», someOtherFunction);

Example

When passing parameter values, use an «anonymous function» that calls the
specified function with the parameters:

document.addEventListener(«click», function() {  myFunction(p1, p2);});

Example

Change the background color of the document’s <body> element:

document.addEventListener(«click», function(){  document.body.style.backgroundColor = «red»;});

Example

Using the removeEventListener() method to remove an event handler that has
been attached with the addEventListener() method:

// Attach an event handler to the documentdocument.addEventListener(«mousemove», myFunction);// Remove the event handler from the document
document.removeEventListener(«mousemove», myFunction);

Example

For browsers that don’t support the addEventListener() method, you can use
the attachEvent() method.

This example demonstrates a cross-browser solution:

if (document.addEventListener) {                // For all major browsers, except IE 8 and earlier  document.addEventListener(«click», myFunction);} else if (document.attachEvent) {              // For IE 8 and earlier versions
  document.attachEvent(«onclick», myFunction);}

Прекращение всплытия

Всплытие идёт с «целевого» элемента прямо наверх. По умолчанию событие будет всплывать до элемента , а затем до объекта , а иногда даже до , вызывая все обработчики на своём пути.

Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.

Для этого нужно вызвать метод .

Например, здесь при клике на кнопку обработчик не сработает:

event.stopImmediatePropagation()

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

То есть, препятствует продвижению события дальше, но на текущем элементе все обработчики будут вызваны.

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

Не прекращайте всплытие без необходимости!

Всплытие – это удобно. Не прекращайте его без явной нужды, очевидной и архитектурно прозрачной.

Зачастую прекращение всплытия через имеет свои подводные камни, которые со временем могут стать проблемами.

Например:

1. Мы делаем вложенное меню. Каждое подменю обрабатывает клики на своих элементах и делает для них , чтобы не срабатывало внешнее меню.
2. Позже мы решили отслеживать все клики в окне для какой-то своей функциональности, к примеру, для статистики – где вообще у нас кликают люди. Некоторые системы аналитики так делают. Обычно используют , чтобы отлавливать все клики.
3. Наша аналитика не будет работать над областью, где клики прекращаются . Увы, получилась «мёртвая зона».

Зачастую нет никакой необходимости прекращать всплытие. Задача, которая, казалось бы, требует этого, может быть решена иначе. Например, с помощью создания своего уникального события, о том, как это делать, мы поговорим позже. Также мы можем записывать какую-то служебную информацию в объект в одном обработчике, а читать в другом, таким образом мы можем сообщить обработчикам на родительских элементах информацию о том, что событие уже было как-то обработано.

Event handlers

To react on events we can assign a handler – a function that runs in case of an event.

Handlers are a way to run JavaScript code in case of user actions.

There are several ways to assign a handler. Let’s see them, starting from the simplest one.

A handler can be set in HTML with an attribute named .

For instance, to assign a handler for an , we can use , like here:

On mouse click, the code inside runs.

Please note that inside we use single quotes, because the attribute itself is in double quotes. If we forget that the code is inside the attribute and use double quotes inside, like this: , then it won’t work right.

An HTML-attribute is not a convenient place to write a lot of code, so we’d better create a JavaScript function and call it there.

Here a click runs the function :

As we know, HTML attribute names are not case-sensitive, so works as well as and … But usually attributes are lowercased: .

We can assign a handler using a DOM property .

For instance, :

If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property.

So this way is actually the same as the previous one.

These two code pieces work the same:

1. Only HTML:

2. HTML + JS:

In the first example, the HTML attribute is used to initialize the , while in the second example – the script, that’s all the difference.

As there’s only one property, we can’t assign more than one event handler.

In the example below adding a handler with JavaScript overwrites the existing handler:

To remove a handler – assign .

Вот некоторые популярные JavaScript события:

— срабатывает тогда, когда что-то поменялось в HTML элементе.

— когда пользователь кликает на элемент.

 — когда пользователь наводит мышь на HTML элемент.

 — когда пользователь отводит мышку от элемента.

 — когда пользователь кликает на клавиатуру.

— когда браузер заканчивает загрузку страницы.

Чтобы добавить слушатель событий к HTML элементу, вы можете использовать  метод.

Первая часть кода это то, что мы будем слушать, в нашем случае это просто HTML элемент. Но в JavaScript можно слушать просто неописуемое изобилие вещей на странице и не только. Это может быть HTML элемент на странице, это может быть сам документ или это может быть окно браузера. В общем, это объект высшего порядка в client-side JavaScript который охватывает почти всё. Но всё же, в большинстве случаев это HTML элементы. Вторая часть кода это уже сам слушатель.

Вот как работает :

Когда пользователь кликает на HTML элемент, с  , то слушатель событий срабатывает и вызывает функцию .

Слушатели событий выставляются после загрузки страницы. Так что, когда вы впервые открываете сайт, браузер скачивает, считывает и выполняет JavaScript.

В коде выше, при загрузке страницы, слушатель событий находит HTML элемент с   и выставляет на него слушатель события по клику.

Вся эта конструкция будет успешно работать, если элемент уже существует на странице. Но что происходит со слушателем событий, когда элемент добавляется в DOM уже после загрузки страницы?

JS Tutorial

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS LetJS ConstJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop For InJS Loop For OfJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS ScopeJS HoistingJS Strict ModeJS this KeywordJS Arrow FunctionJS ClassesJS JSONJS DebuggingJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved Words

Обработка события onclick для меню

В следующем примере рассмотрим, как предыдущий код можно применить к сворачиванию/разворачиванию меню, которое размещено внутри элементов списка

Мы используем css-свойство , чтобы меню появлялось из прозрачного состояния (за это отвечает свойство ).  Обратите внимание, что теги

Событие onclick для меню

<style>
@keyframes fadeInMenu {
from {opacity: 0}
to {opacity: 1}
}
</style>

<a href=»#» id=»toggleMenu»>Menu</a>
<ul id=»mymenu» class=»hideText»>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>About Us</a></li>
<li><a href=»#»>Portfolio</a></li>
<li><a href=»#»>Contacts</a></li>
</ul>

<script>
toggleMenu.addEventListener(‘click’, showHideMenu);
function showHideMenu(event){
event.preventDefault();
mymenu.classList.toggle(‘hideText’);
mymenu.classList.contains(‘hideText’) ? mymenu.style.animation=’none’ :
mymenu.style.animation=’fadeInMenu .8s’;
}
</script>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<style> @keyframes fadeInMenu { from {opacity} to {opacity1} } </style>   <ahref=»#»id=»toggleMenu»>Menu<a> <ul id=»mymenu»class=»hideText»> <li><ahref=»#»>Home<a><li> <li><ahref=»#»>About Us<a><li> <li><ahref=»#»>Portfolio<a><li> <li><ahref=»#»>Contacts<a><li> <ul>   <script> toggleMenu.addEventListener(‘click’,showHideMenu); functionshowHideMenu(event){ event.preventDefault(); mymenu.classList.toggle(‘hideText’); mymenu.classList.contains(‘hideText’)?mymenu.style.animation=’none’ mymenu.style.animation=’fadeInMenu .8s’; } </script>

В функцию   передается параметр , который мы вроде бы нигде не записывали. Этот параметр — ссылка на событие со всеми его свойствами и методами. Нужен параметр для того, чтобы при клике на ссылке страница не «прыгала» вверх, т.к. именно к этому приводит такая запись атрибута . Для этого мы отменяем действие по умолчанию при клике на такой ссылке с помощью метода .

Вы можете проверить действие метода , кликнув на ссылке с текстом «Menu»  и на любой другой ссылке открывшегося меню, чтобы посмотреть на разницу.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика –- невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов и . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

Имя события, например .

Ссылка на функцию-обработчик.

Дополнительный объект со свойствами:

• : если , тогда обработчик будет автоматически удалён после выполнения.
• : фаза, на которой должен сработать обработчик, подробнее об этом будет рассказано в главе Всплытие и погружение. Так исторически сложилось, что может быть , это то же самое, что .
• : если , то указывает, что обработчик никогда не вызовет , подробнее об этом будет рассказано в главе Действия браузера по умолчанию.

Для удаления обработчика следует использовать :

Удаление требует именно ту же функцию

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

Обработчик не будет удалён, т.к

в передана не та же функция, а другая, с одинаковым кодом, но это не важно

Вот так правильно:

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через

Метод позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Обработчики некоторых событий можно назначать только через

Существуют события, которые нельзя назначить через DOM-свойство, но можно через .

Например, таково событие , которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Распространение

Обработчики событий (например, JavaScript touch events), зарегистрированные для родительских узлов, также будут принимать события, которые происходят в дочерних элементах. Если была нажата кнопка, находящаяся внутри абзаца, обработчики событий абзаца также получат событие click.

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

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

В следующем примере мы регистрируем обработчики «MouseDown» как для кнопки, так и для абзаца. При клике правой клавишей (JavaScript mouse events) обработчик вызывает метод stopPropagation, который предотвращает запуск обработчика абзаца. При нажатии на кнопку другой клавишей мыши запускаются оба обработчика:

<p>Абзац и в нем <button>кнопка</button>.</p>
<script>
  var para = document.querySelector("p");
  var button = document.querySelector("button");
  para.addEventListener("mousedown", function() {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", function(event) {
    console.log("Handler for button.");
    if (event.which == 3)
      event.stopPropagation();
  });
</script>

Большинство объектов событий имеют свойство target, которое указывает на узел, в котором они возникли. Вы можете использовать это свойство, чтобы случайно не обрабатывать какое-то событие, которое распространяется вверх из узла.

Также можно использовать JavaScript event target, чтобы расширить диапазон события определенного типа. Например, если у вас есть узел, содержащий длинный список кнопок, более удобно зарегистрировать один обработчик клика для внешнего узла и использовать свойство target, чтобы отслеживать, была ли нажата кнопка, а не регистрировать экземпляры обработчика для всех кнопок:

<button>A</button>
<button>B</button>
<button>C</button>
<script>
  document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON")
      console.log("Clicked", event.target.textContent);
  });
</script>

Adding Event Handlers

JavaScript provides you with a lot of different opportunities, which we will now review one by one. First, we will learn to simply add an event handler to an element. Then, we’ll try adding more than one at once.

Once we get the idea, we’ll see how event handlers should be applied to window objects. Carefully review the code examples provided to grasp the concepts.

Adding an Event Handler to an Element

When you add a JavaScript event listener, the function to be executed upon an event can be either anonymous or named. In the example below, you can see the anonymous function used. In this case, you need to define the code in the function:

Example Copy

In the example below you can see the named function being used. In this case, you are referencing an external function:

Example Copy

Add Many Event Handlers to the Same Element

The JavaScript method lets you add multiple event handlers to a single element, while not overwriting any previously assigned event handlers. Take a look at the example below:

Example Copy

Different event types may be specified as well:

Example Copy

Add an Event Handler to the Window Object

The JavaScript method lets you add event listeners to HTML DOM objects, such as HTML elements, the document that the HTML is in itself, the window object, and any other object that supports events (like the xmlHttpRequest object).

Example Copy

Пишем делегирование событий в JavaScript

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

В общем, код выше говорит нам то, что если элемент на котором отработал клик не является инпутом, то мы выходим из функции.

А если этот элемент является инпутом, то тогда мы выводим в консоль  и выполняем последующий JavaScript код на этом узле потомке.

Очень важно, что теперь мы можем быть уверены в том, что пользователь кликнул нужный узел потомок, пусть даже инпуты не были добавлены в DOM после начальной загрузки страницы

JS Уроки

JS HOMEJS IntroductionJS Where ToJS OutputJS StatementsJS SyntaxJS CommentsJS VariablesJS OperatorsJS ArithmeticJS AssignmentJS Data TypesJS FunctionsJS ObjectsJS ScopeJS EventsJS StringsJS String MethodsJS NumbersJS Number MethodsJS ArraysJS Array MethodsJS Array SortJS Array IterationJS DatesJS Date FormatsJS Date Get MethodsJS Date Set MethodsJS MathJS RandomJS BooleansJS ComparisonsJS ConditionsJS SwitchJS Loop ForJS Loop WhileJS BreakJS Type ConversionJS BitwiseJS RegExpJS ErrorsJS DebuggingJS HoistingJS Strict ModeJS this KeywordJS Style GuideJS Best PracticesJS MistakesJS PerformanceJS Reserved WordsJS VersionsJS Version ES5JS Version ES6JS JSON

Event Bubbling or Event Capturing?

There are two ways of event propagation in the HTML DOM, bubbling and capturing.

Event propagation is a way of defining the element order when an event occurs.
If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element’s
«click» event should be handled first?

In bubbling the inner most element’s event is handled first and then the outer:
the <p> element’s click event is handled first, then the <div> element’s click event.

In capturing the outer most element’s event is handled first and then the inner:
the <div> element’s click event will be handled first, then the <p> element’s click event.

With the addEventListener() method you can specify the propagation type by using the «useCapture» parameter:

addEventListener(event, function, useCapture);

The default value is false, which will use the bubbling propagation, when the value is set to true, the event uses the capturing propagation.

Example

document.getElementById(«myP»).addEventListener(«click», myFunction, true);
document.getElementById(«myDiv»).addEventListener(«click», myFunction, true);

Обработчик событий JavaScript

Реагировать на нажатие клавиши можно, постоянно считывая ее состояние, чтобы поймать момент нажатия клавиши, прежде чем она снова не будет отпущена.

Именно так обрабатывался ввод данных на примитивных машинах. Более прогрессивным является определение нажатия клавиши и его постановка в очередь. Затем программа может периодически проверять очередь новых событий и реагировать на то, что там находит. В таком случае программа должна не забывать просматривать очередь и делать это часто.

В период от нажатия клавиши и до обнаружения программой этого события, она фактически не отвечает на запросы. Такой подход называется поллингом (опросом).

Большинство программистов стараются избегать его, если это возможно.

Самым лучшим способом считается реализация системы, которая дает коду возможность реагировать на события, когда они происходят. Браузеры реализуют ее, предоставляя возможность регистрировать функции обработчиков для конкретных JavaScript event:

<p>Кликните по этому документу, чтобы активировать обработчик.</p>
<script>
  addEventListener("click", function() {
    console.log("You clicked!");
  });
</script>

Функция addEventListener регистрируется таким образом, что ее второй аргумент вызывается всякий раз, когда происходит событие, описанное первым аргументом.

Подписка на событие через addEventListener

Ещё один способ назначить событию обработчик — это использовать метод .

Синтаксис :

// $element - объект или DOM-элемент к которому нужно добавить обработчик
$element.addEventListener(event, handler);

Параметры:

• — имя события (например, );
• — функция, которая будет вызвана при возникновении этого события;;
• (не обязательный) — объект, в котором можно задать дополнительные параметры.

В можно задать:

• — если , то обработчик будет вызван всего один раз;
• — задаёт фазу, на которой нужно вызвать обработчик события (по умолчанию — на этапе всплытия); если нужно на этапе погружения (перехвата) — то этому ключу следует установить значение ;
• — определяет следует ли вызывать ; если установить — то обработчик никогда не вызовет этот метод.

Кроме этого, можно установить или , в этом случае он будет просто определять фазу (всплытие или погружение).

Пример:

function changeBgColor() {
  document.body.style.backgroundColor = '#3f51b5';
}

document.addEventListener('click', changeBgColor, false);

В этом примере прикреплен к объекту . Когда событие возникнет на этом элементе, будет вызвана функция .

Если мы откроем документ, содержащий этот код в браузере, то сначала увидим пустую страницу.

Однако при клике фон страницы изменится с белого на .

Иногда возникают ситуации, когда нужно удалить обработчик. Это можно выполнить, используя :

$element.removeEventListener(event, handler);

Этот метод принимает аргументы тех же типов, что .

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

function changeBgColor() {
  document.body.style.backgroundColor = '#3f51b5';
}

document.addEventListener('click', changeBgColor, false);
document.removeEventListener('click', changeBgColor, false);

Если обработчик — анонимная функция, то её удалить нельзя.

document.addEventListener('click', function() {
  document.body.style.backgroundColor = '#3f51b5';
});
// удалить обработчик установленный выше с помощью addEventListener не получится, т.к. это разные функции, имеющие одинаковый код
document.removeEventListener('click', function() {
  document.body.style.backgroundColor = '#3f51b5';
});

Как добавить несколько обработчиков к событию?

Метод в отличие от предыдущих способов позволяет назначить одному событию несколько обработчиков:

function handler1() { ... }
function handler2() { ... }

document.addEventListener('click', handler1);
document.addEventListener('click', handler2);

Как правильно прикрепить обработчики к элементам?

Для прикрепления обработчиков к элементам, необходимо чтобы эти элементы на странице были доступны. Определить, когда они будут доступны с момента загрузки документам можно с помощью события . Данное событие возникает на когда DOM полностью построено:

document.addEventListener('DOMContentLoaded', function () {
  // DOM полностью построен и доступен
  ...
});

Отмена действия браузера

Есть два способа отменить действие браузера:

• Основной способ – это воспользоваться объектом . Для отмены действия браузера существует стандартный метод .
• Если же обработчик назначен через (не через ), то также можно вернуть из обработчика.

Возвращать не нужно

Обычно значение, которое возвращает обработчик события, игнорируется.

Единственное исключение – это из обработчика, назначенного через .

В других случаях не нужен, он никак не обрабатывается.

Рассмотрим меню для сайта, например:

Данный пример при помощи CSS может выглядеть так:

В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами . В этом подходе есть некоторые преимущества, например:

• Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать или , то данное сочетание работать не будет.
• Поисковые движки переходят по ссылкам при индексации.

Например, вот так:

Если мы уберём , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из . А это нам здесь не нужно, мы обрабатываем клик сами.

Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.

События, вытекающие из других

Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.

Например, событие для поля приводит к фокусировке на нём и запускает событие . Если мы отменим событие , то фокусирования не произойдёт.

В следующем примере попробуйте нажать на первом – происходит событие . Но если вы нажимаете по второму элементу, то события не будет.

Это потому, что отменено стандартное действие . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.