Есть ли способ красиво вызвать addeventlistener несколько раз?

Question

[hulq]

Всем привет! Подскажите, есть ли способ красиво вызвать addeventlistener несколько раз?
На данный момент я не знаю другого способа, кроме как просто:

trigger1.addEventListener('mouseenter', function () {
    changer('OptionOne', OptionOne);
})
trigger2.addEventListener('mouseenter', function () {
    changer('OptionOne', OptionOne);
})

Можно ли сделать что-то подобное:

Object.assign(AnyClass.prototype, {
method( ) {...}
}

Comments

[hulq]

низкомолекулярный макрос, Извиняюсь, мой косяк. Но тем не менее, есть способ сделать это не так топорно?

Answer 1

[zkrvndm]

Обычно делают так:

document.body.addEventListener('mouseenter', function(e) {
    console.log(e.target);
});

В переменной e.target будет лежать целевой элемент, проверяйте его на соответствие и если он соответствует...

code.mu/ru/javascript/manual/dom/matches

Answer 2

[Владислав Великоиваненко]

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

Comments

[hulq]

Вы все правильно поняли. Большое спасибо!

[Владислав Великоиваненко]

hulq, всегда рад!) Ну и соответственно, забыл сказать, если элементы с одним классом, то думаю знаете про querySelectorAll, и по нему пробежаться через forEach.

Answer 3

[Валентин]

Если для набора элементов на одно событие нужно навесить одну и ту же функцию, то можно так:

((triggers, event, func) => {
  triggers.forEach(
    trigger => trigger.addEventListener(event, func)
  )    
})([trigger1,trigger2,trigger3], 'mouseenter', (e) => {changer('OptionOne', OptionOne);})

или так

const myAwesomeFunc = (e) => {changer('OptionOne', OptionOne);}

const addEventListeners = (triggers, event, func) => {
  triggers.forEach(
    trigger => trigger.addEventListener(event, func)
  )    
}

addEventListeners([trigger1,trigger2,trigger3], 'mouseenter', myAwesomeFunc)

Comments

[Валентин]

Но это я бы на TypeScript писал, или надо еще проверить наличие у объекта addEventListener )