Как выглядят внутренности addEventListener()?

Question

[zlodiak]

Помогите пожалуйста пролить свет на таинственную природу addEventListener() . Хотелось бы в общих чертах понять его работу. Далее я в очень упрощённом и схематичном виде представлю своё понимание. А вы пожалуйста поправьте меня, если буду не прав.

Рассмотрим такой простейший код навешивания обработчика на html-элемент:
<div id="btn">click me</div>

const btnEl = document.getElementById('btn');
console.dir(btnEl);
btnEl.addEventListener('click', (e) => {
	console.log('clicked', e);
});

1. Так как любой html-элемент это объект, то видно, что
   
2. у объекта вызывается метод addEventListener()
   
3. в который передаётся два аргумента
   
4. непосредственно у элемента #btn нет метода addEventListener(),
   
5. поэтому поднимаемся по цепочке прототипов и находим его
   
6. ок. этот метод принял два аргумента и теперь делает с ними что-то типа(далее схематичный код) такого:
   

function addEventListener(action, callback) {
  switch (action) {
    case 'click':
      callback();
      break;
    case 'mouseover':
      alert('bla bla');
      break;
    ....
    ....
    ...
  }
}

Это верный в общих чертах ход мысли? Я не пропустил чего-нибудь важного?

UPD1:
Новая версия моего хода мысли здесь: JSFIDDLE

UPD2:
Вот упрощённая модель с моей точки зрения: JSFIDDLE

Answer 1

[Stalker_RED]

Вы кое-что угадали, но пробелов больше чем правильных догадок.
Почитайте про event loop и вообще событийную модель.
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://learn.javascript.ru/introduction-browser-events

Comments

[zlodiak]

Спасибо, но это не помогло. По второй ссылке даётся высокоуровневое объяснение обработчиков. То есть "делайте так и будет хорошо". А я хотел бы разобраться что именно происходит под капотом, хотя бы в общих чертах

[Stalker_RED]

zlodiak, боюсь. у вас неправильное представление о том, что такое "listener" вообще и как эти события устроены. Без этого непонятно как объяснять.

[zlodiak]

Stalker_RED, Я попробовал написать приблизительную, упрощённую модель того, что происходит на самом деле при добавлении и вызове обработчика события: JSFIDDLE

После этого возможно что-нибудь объяснить или я по-прежнему далёк от понимания?

[Stalker_RED]

zlodiak, добавьте возможность навешивать несколько листенеров на событие

Answer 2

[deight]

class MyElement {
  constructor () {
    this.listeners = {}
    setTimeout(() => this.trigger('loaded'), 3000)
  }
  get (event) {
    return this.listeners[event] || (this.listeners[event] = new Set())
  }
  on (event, listener) {
    this.get(event).add(listener)
  }
  off (event, listener) {
    this.get(event).delete(listener)
  }
  trigger (event, ...args) {
    this.get(event).forEach(listener => listener(...args))
  }
}

const element = new MyElement()

const listener = () => console.log('it is loaded')

element.on('loaded', listener)

Comments

[zlodiak]

Посмотрите пожалуйста правильно ли я вас понял: JSFIDDLE

В этом упрощённом коде я предположил, что:

1. Существует объект window
   
2. Существует объект конкретного DOM-элемента
   
3. Оба они являются наследниками объекта события Events
   
4. Объект элемента подписывается на событие click посредством взаимодействия с паттерном Наблюдатель
   
5. Далее в объекте window происходит как бы клик пользователя по элементу
   
6. Соответственно срабатывает trigger и проверяется весь массив накопленных событий
   
7. Если находится функция, соответствующая click, то она выполняется
   

Это конечно всё очень упрощённая модель(в частности не учтено, что dom-элементов может быть много, не учтена передача объекта события "e"), но если в общих чертах всё верно, то, надеюсь, я уяснил суть.

class Events {
  constructor () {
    this.listeners = {}
  }
  get (event) {
    return this.listeners[event] || (this.listeners[event] = new Set())
  }
  addListener (event, listener) {
  	console.log('addListener start');
    this.get(event).add(listener)
  }
  removeListener (event, listener) {
    this.get(event).delete(listener)
  }
  trigger (event, ...args) {
  	console.log('trigger start');
    this.get(event).forEach(listener => listener(...args))
  }
}		

class DOMelement {
	constructor() {
		console.log('construct dom element');
	}
}

class WINDOWelement {
	constructor() {
		console.log('construct window element');

		// user click simulation
		setTimeout(() => {
			console.log('user click to dom element');
			this.trigger('click');
		}, 3000);
	}
}		

const events = new Events();
const domElement = new DOMelement();
const windowElement = new WINDOWelement();

domElement.__proto__ = events;
windowElement.__proto__ = events;

domElement.addListener('click', () => { console.log('is clicked') });

[deight]

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

class Event {

}

class EventTarget {
  constructor () {
    this.listeners = {}
  }
  getEventListeners (event) {
    return this.listeners[event] || (this.listeners[event] = new Set())
  }
  addEventListener (event, listener) {
    this.getEventListeners(event).add(listener)
  }
  removeEventListener (event, listener) {
    this.getEventListeners(event).delete(listener)
  }
  dispatchEvent (event, ...args) {
    this.getEventListeners(event).forEach(listener => listener(...args))
  }
}

class Element extends EventTarget {

}

class HTMLElement extends Element {
  click () {
    this.dispatchEvent('click', new Event())
  }
}

class HTMLDivElement extends HTMLElement {

}

const div = new HTMLDivElement() // тоже что в браузере document.createElement('div')

div.addEventListener('click', e => console.log(e))

div.click()