Вешать по нескольку событий

Question

EventTarget.prototype.add = (_ => {
    //Array.isArray(ff)
    return function() {
        EventTarget.prototype.addEventListener.apply(this, arguments);
        return this;
    }
})();

i.add(this.desktop ? 'mouseenter' : 'touchstart', e => {});

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

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

И как в данном случаи лучше сделать это?

Что если так писать

class Target {
    constructor(val) {
        this.el = val
    }
    add(e, f) {
        e.forEach(i => this.el.addEventListener(i, f));
        return this

    }
}
new Target(i).add(['mouseenter', 'touchstart'], t => {

    console.log(t)

}).add(['mouseleave', 'touchend'], t => {

    console.log(t)

});

Answer 1

Вот пример с классами:

class Target {
  constructor(query) {
    this.el = document.querySelector(query);
  }
  
  addEvent(eventName, handler) {
    this.el?.addEventListener(eventName, handler);
    return this;
  }
  
  addEvents(eventsNames, handler) {
    eventsNames.forEach(eventName => this.addEvent(eventName, handler));
    return this;
  }
}

const exampleDiv = new Target('#example')
  .addEvent('mouseover', () => console.log('Hover not click'))
  .addEvents(['click', 'dblclick'], (e) => {
    console.log(`You just ${e.type}ed me`);
  });

<div id="example">Click or doubleclik or hover</div>

Как устанваливать значение для this.el решайте сами, мне мой способ (через селелктор) показался удобнее потому так написал, можете передавать сразу нужный элемент, если вам так удобнее

БЛОГ НА HUSL

Вешать по нескольку событий

Ответы (1 шт):