Какова суть генерации своих событий в JavaScript?

Question

[antpv]

Не совсем понимаю зачем это, а существующая информация на эту тему даёт больше вопросов чем ответов. (которой кстати вообще нет, youtube - чист, на learn.js - абсолютно не понятно, статтей не нашёл).

Я правильно понимаю, что мы можем повесить любое событие на элемент, а после того как оно будет создано, оно будет вызвано на тех элементах на которых висит?

Вообще не понимаю, зачем создавать свои события? И главное - что должно произойти чтобы они сработали?

Comments

[antpv]

Уточню: как браузер понимает, что событие "tellFuckYou" произошло? это главное, о чём нигде не написано

[Антон Швец]

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

[antpv]

Антон, ответ без ответа) я так и не понял как событие "tellFuckYou" должно произойти?) я должен проговорить его название в микрофон?) откуда браузеру знать что оно произошло? я понимаю что click страбатывает при клике на элемент на который повешано события, но если я повешу на элемент "tellFuckYou", откуда браузеру знать когда выполнить коллбэк? в какой конкретно момент "tellFuckYou" происходит?

[Антон Швец]

antpv, когда вы сами его диспатчите.
https://developer.mozilla.org/ru/docs/Web/Guide/Ev...

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

[xfg]

antpv, когда происходит вызов dispatchEvent, то в очередь кладется сообщение вместе с его обработчиком. Затем оно извлекается из очереди и вызывается его обработчик, которому в качестве аргумента передается это самое сообщение. Таким образом формируется стек вызовов. Каждый вызов функции это новый фрейм в стеке. До тех пор пока стек не опустеет (не выполнится весь код) все события будут накапливаться и висеть в очереди. Как только стек опустеет, то будет извлечено следующее сообщение из очереди и сформируется новый стек вызовов. Поэтому на самом деле click срабатывает не при клике, а только тогда когда стек опустеет и это событие будет первым в очереди.

Подробнее читайте здесь как работает javascript https://developer.mozilla.org/en-US/docs/Web/JavaS...

Answer 1

[Сергей Соколов]

Попробую на пальцах объяснить.

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

Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.

Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.

Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название: var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:

document.getElementById('stolik').dispatchEvent(myEvent);

Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле detail:

var event = new CustomEvent('saySomething', { detail: "Hello there!" });

Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.

Comments

[Crash]

лучшее объяснение)

[Юрий Костин]

Это шедеврально, сэр! =)

Answer 2

[Антон Спирин]

статей не нашёл

Создание собственных событий

Уточню: как браузер понимает, что событие "tellFuckYou" произошло? это главное, о чём нигде не написано

// Создание события
var event = document.createEvent('Event');

// Назначить имя событию
event.initEvent('build', true, true);

// Слушаем событие
document.addEventListener('build', function (e) {
  // e.target соотетствует объекту document
}, false);

// target события может быть любой элемент
document.dispatchEvent(event);

Вообще не понимаю, зачем создавать свои события?

Если не понимаете, значит вам это не нужно.

Comments

[antpv]

В каком случае будет выполнена коллбэк функция в прослушке? после document.dispatchEvent(event)? тоесть document.dispatchEvent(event) другими словами указывает что событие build произошло на document?

ps: с мдм я видел, но это сухая документация

[Антон Спирин]

antpv, и какая часть документации вызвала у вас затруднения?
1. Создаете событие.
2. Создаете слушателя.
3. Диспатчите.
4. Срабатывает колбек слушателя.
Это все.

EventTarget.dispatchEvent

ps: с мдм я видел, но это сухая документация

Это как раз, разжеванные донельзя примеры.

другими словами указывает что событие build произошло на document?

да traget будет document в этом случае

[antpv]

Антон Спирин, Почему не работает такой пример? я не могу задиспатчить после клика

var event = document.createEvent('Event');

event.initEvent('clicker', true, true)

document.addEventListener('clicker', function(e) {
	alert('я сработал')
})

document.addEventListener('click', function (e) {
	document.dispatchEvent(event);
})

[Антон Спирин]

antpv, отлично работает.

[antpv]

Антон Спирин, Наверное chrome выпилил, видел где-то что со своими событиями они многое ограничили. Стоит ли вообще использовать то что ведёт себя непредсказуемо даже в современных браузерах?
ps: на jsfiddle работает, а у меня на странице нет)

[Антон Спирин]

antpv, отлично работает в последней версии Chrome. Должно работать и на вашей странице.
can-i-use
Мне за всю практику эти события ни разу не пригодились и, думаю, вряд ли пригодятся.

[antpv]

Антон Спирин, конечно, возможно какие-то задачи будут выглядеть не так красиво без своих событий, вряд ли можно придумать такую задачу где без этого никуда) но, для понимания я хотел бы изучить такую возможность)