Дом Событие
События и обработка событий обеспечивают основной метод в JavaScript для реагирования на инциденты, возникающие, когда браузер обращается к веб-странице.
Первоначально браузеры ждут, пока они не получат все ресурсы, связанные со страницей, чтобы проанализировать, обработать, нарисовать и представить страницу пользователю. Отображаемая страница остается неизменной, пока браузер не запросит новую страницу. С переходом на динамический рендеринг страницы браузеры непрерывно переключаются между обработкой, рисованием, представлением контента и ожиданием какого-либо нового триггера события. Триггеры событий включают завершение загрузки ресурса в сети например, загрузка изображения, которое теперь может быть нарисовано на экране, завершение анализа ресурса браузером например, , обрабатывает HTML-содержимое страницы, взаимодействие пользователя с содержимым страницы например, нажимает кнопку. Дуглас Крокфорд эффективно объясняет это изменение в нескольких лекциях, в частности в своем выступлении Неудобный API: теория DOM, в котором показано изменение потока по сравнению с исходным потоком в браузере.
Современные веб-браузеры следуют шаблону событий, используя стандартизированный подход. Мы используем в качестве метода регистрации для функции, которая будет обрабатывать события, метод с именем addEventListener, который ожидает в качестве аргументов строковое имя типа события и функцию-обработчик.
События разделены на разные типы событий, например:
- События мыши
- css Анимация События
- форма События
- печать событий
- просмотр событий
- буфер обмена События
- keboard События
- СМИ События
- прогресс События
- окно События
- документ События
- события датчика
- коснитесь События
- указатель События
Объект события имеет собственный интерфейсный интерфейс Event
interface Event {
readonly attribute DOMString type; -> typoe of event
readonly attribute EventTarget? target; -> target where event is dispatched
// example : there is an exampel event delegation in Jquery
$('el').on('click','li'()=>{})
readonly attribute EventTarget? currentTarget; -> target where event will be executed
sequence<EventTarget> composedPath();
const unsigned short NONE = 0; *
const unsigned short CAPTURING_PHASE = 1; *
const unsigned short AT_TARGET = 2; *
const unsigned short BUBBLING_PHASE = 3; *
readonly attribute unsigned short eventPhase;
void stopPropagation(); prevent buble case
attribute boolean cancelBubble; // historical alias of .stopPropagation
void stopImmediatePropagation(); // interrupt every event following this
readonly attribute boolean bubbles; check if is on bubble case
readonly attribute boolean cancelable; check if event is canselable
void preventDefault(); -> prevent default function registered on element.
readonly attribute boolean defaultPrevented; -> check if is prevented
readonly attribute boolean composed; check if this element is composed
[Unforgeable] readonly attribute boolean isTrusted; -> check if user interacted with dom or is another event that have done this.
readonly attribute DOMTimeStamp timeStamp; -> time
void initEvent(DOMString type, boolean bubbles, boolean cancelable);
};
dictionary EventInit {
boolean bubbles = false;
boolean cancelable = false;
boolean composed = false;
};
ЦЕЛЕВОЙ ИНТЕРФЕЙС СОБЫТИЯ
interface EventTarget {
void addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options);
void removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options);
boolean dispatchEvent(Event event);
};
callback interface EventListener {
void handleEvent(Event event);
};
dictionary EventListenerOptions {
boolean capture = false;
};
dictionary AddEventListenerOptions : EventListenerOptions {
boolean passive = false;
boolean once = false;
};
ИНТЕРФЕЙС ПОЛЬЗОВАТЕЛЬСКИХ СОБЫТИЙ
interface CustomEvent : Event {
readonly attribute any detail;
void initCustomEvent(DOMString type, boolean bubbles, boolean cancelable, any detail);
};
dictionary CustomEventInit : EventInit {
any detail = null;
};
- нет 0
- Захват 1
- Задача 2
- Пузыри 3
Когда событие вызывается, оно заглушается или находится в фазе none 0, событие проходит через уровни DOM до тех пор, пока не достигнет цели. Эта фаза известна как фаза захвата. Когда событие достигает цели, теперь оно находится в целевой фазе (2), затем повышается в DOM, это называется фазой пузыря (3).
ФАЗА ЗАВЕРШЕНИЯ (1)
Фаза захвата - это фаза, когда событие вызывается и распространяется на каждый уровень, пока не достигнет цели, на которой оно было вызвано. Фаза захвата - установить путь, по которому событие будет происходить из Target → Document, чтобы эта фаза определяла путь для фазы Bubbling.
addeventListener (type, callback, capturing: true)
Мы можем остановить Фазу захвата, если установим последний параметр в значение false или undefined, и в этом случае все следующие события одного и того же типа в этом элементе не будут выполняться.
<div class="parentt">
target
<span class="child">current target</span>
</div>
$j('.parent').click((e: JQueryEventObject)=>{
console.log("some code related to rarget parent")
});
$j('.child').click((e: JQueryEventObject)=>{
console.log("some code related to child inside");
e.stopPropagation();
});
Если мы удалим e.stopPropagation (); и мы нажимаем на $ (‘. child’), тогда мы запускаем обе консоли, поскольку первая функция $ (‘. child’) будет eventTarget, а $ (‘. parent’) будет currentEvetTarget. из-за того, что «пузырь» позволяет этому элементу прослушивать это событие и автоматически превращаться в прослушивающее событие. это останавливается stopPropagation ().
Но если мы установим stopImediatePropagation (), то никакое другое событие не будет выполняется на этом элементе при условии, что событие того же типа
$j('.parent').click((e: JQueryEventObject)=>{
console.log("some code related to rarget parent")
});
$j('.child').click((e: JQueryEventObject)=>{
console.log("some code related to child inside");
e.stopImediatePropagation();
});
// ky funksion nuk do exekutohet
$j('.child').click((e: JQueryEventObject)=>{
console.log("some code related to child inside 2");
e.stopImediatePropagation();
});
Еще один важный элемент - event.delegationTarget; где мы можем делегировать слушателя
$('.parent').on('click','.child',(e) => {
console.log("some code related to child inside");
});
В этом случае мы делегировали прослушиватель событий элементу $ (‘. Child’), но у нас также есть делегатор, который является $ (‘. Parent’). В приведенных выше случаях delegateTarget is currentTarget цель делегата в основном используется для проблем с производительностью.
ФАЗА ПУЗЫРЬКИ
После того, как Событие достигает цели - цели, путь перемещения события здесь не заканчивается, он поднимается вверх через слои на пути, который определен в фазе захвата.
Представьте себе это как слои земли. Событие происходит на поверхности, спускается к ядру и задает путь через каждый слой. Итак, каждый слой теперь является целью, но если мы хотим прервать этот процесс, stopPropagation () остановит это событие. Следовательно, он никогда не достигнет ядра и вернется прямо наверх с завершенного уровня. Узел пузырьков никогда не достигнет других слоев. У нас должна быть очень веская причина для этого, потому что это пространство является мертвым пространством для этого события, а это означает, что в этом пространстве это событие не может быть услышано.
