DOM
События

параметры

замечания

Вступление

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

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

HTML-события - это «вещи», которые происходят с элементами HTML. JavaScript может «реагировать» на эти события. через Event Listeners . Кроме того, пользовательские события могут запускаться с помощью dispatchEvent . Но это только введение, поэтому давайте начнем!

Основной прослушиватель событий

Для прослушивания событий вы вызываете target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Это вызовет loadImage каждый раз, my-button .

Слушатели событий могут быть присоединены к любому узлу дерева DOM. чтобы увидеть полный список всех событий, инициированных в браузере: перейти сюда MDN-ссылка для полного списка событий

Удаление прослушивателей событий

Метод removeEventListener () удаляет обработчики событий, которые были связаны с методом addEventListener ():

element.removeEventListener("mousemove", myFunction);

Все (имя события, функция и параметры) в removeEventListener должны соответствовать одному набору при добавлении слушателя событий к элементу.

.bind with removeListener

использование функции .bind в функции при добавлении прослушивателя событий предотвратит удаление функции, чтобы фактически удалить eventListener, который вы можете написать:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

прослушивать событие только один раз

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

Этот небольшой помощник поможет нам в этом:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Нецелесообразно присоединять функции к прототипу объекта, поэтому вы можете удалить первую строку этого кода и добавить к нему цель в качестве первого параметра.

Ожидание загрузки документа

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

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

Иногда вы пытаетесь получить доступ к объекту DOM перед его загрузкой, вызывая нулевые указатели. Это очень сложно отладить. Чтобы избежать этого, используйте вместо этого document DOMContentLoaded . DOMContentLoaded гарантирует, что содержимое HTML было загружено и инициализировано без ожидания других внешних ресурсов.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Объект события

Чтобы получить доступ к объекту события, event параметр события в функцию обратного вызова прослушивателя событий:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

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

e.preventDefault ();

Метод event.preventDefault() останавливает действие элемента по умолчанию.

Например:

• Предотвратить отправку формы отправки
• Предотвратить ссылку из URL-адреса

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Идентифицирует текущую цель для события, поскольку событие пересекает DOM. Он всегда относится к элементу, к которому привязан обработчик событий, а не к event.target, который идентифицирует элемент, на котором произошло событие.

другими словами

e.target вернет то, что запускает диспетчер событий для запуска

e.currentTarget вернет то, что вы назначили слушателю.

HTML:

<body>
   <button id="my-button"></button>
</body>

Javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

если вы нажмете кнопку « my-button ,

• e.target будет my-button
• e.currentTarget будет body

Событие Bubbling и захват

События, запущенные с элементами DOM, не просто влияют на элемент, на который они нацелены. Любой из предков цели в DOM может также иметь возможность реагировать на событие. Рассмотрим следующий документ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

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

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... тогда событие будет пузыриться через каждого предка, запуская каждый обработчик клика по пути:

Text clicked!
Paragraph clicked!
Body clicked!

Если вы хотите, чтобы один из ваших обработчиков остановил событие от запуска каких-либо дополнительных обработчиков, он может вызвать метод event.stopPropagation() . Например, если мы заменим наш второй обработчик событий следующим:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

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

Text clicked!
Paragraph clicked, and that's it!

Наконец, у нас есть возможность добавить прослушиватели событий, которые запускаются во время « захвата », а не пузыря. Прежде, чем событие пузырится от элемента через своих предков, оно сначала «захватывается» до элемента через своих предков. Слушатель захвата добавляется путем указания true или {capture: true} в качестве дополнительного третьего аргумента addEventListener . Если мы добавим следующих слушателей в наш первый пример выше:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

Мы получим следующий результат:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

По умолчанию события прослушиваются в фазе барботажа. Чтобы изменить это, вы можете указать, на какой фазе прослушивается событие, указав третий параметр в функции addEventListener. (Чтобы узнать о захвате и пузырях, отметьте заметки )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true означает прослушивание события при его сходе с дерева DOM. false означает прослушивание события, когда он идет вверх по дереву DOM.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

Появится окно с предупреждением:

• 2: при захвате
• 1: на пузыре

Реальные случаи использования

Событие Capture Event будет отправлено до Bubble Event, поэтому вы можете гарантировать, что сначала прослушивается событие, если вы слушаете его на этапе захвата.

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

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

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

Установка true для родительского eventListener сначала вызовет родительский прослушиватель.

В сочетании с e.stopPropagation () вы можете помешать событию инициировать прослушиватель дочерних событий / или родителя. (подробнее об этом в следующем примере)

Мероприятие

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

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

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

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

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Так как событие по умолчанию распространяется (пузыри вверх), то при нажатии на любой элемент LI элемент UL будет UL одно и то же событие. В этом случае мы можем использовать параметр e в функции, которая на самом деле является объектом события, и содержит полезную информацию о событии, включая исходный элемент, который инициировал событие. Так, например, мы можем использовать что-то вроде следующего:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Итак, очевидно, что e (Event Object) позволяет нам исследовать исходный элемент (e.target), и мы можем легко вводить новые элементы в UL после загрузки DOM, и только один делегированный обработчик событий будет обрабатывать все события click внутри родительского UL который также меньше потребляет память, потому что мы объявили только одну функцию для всех элементов.

Запуск пользовательских событий

API CustomEvent позволяет разработчикам создавать пользовательские события и запускать их на узлах DOM, передавая данные по пути.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString, представляющий название события.

customEventInit - это необязательные параметры (которые будут переданы как e в следующем примере).

Вы можете присоединить eventListeners к document или любому элементу HTML.

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

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);