Есть ли способ добавить один прослушиватель событий для нескольких?

Question

У меня есть кое-что, что происходит, когда пользователь перемещается, поэтому для этого я установил три прослушивателя событий:

document.addEventListener('mousemove', this.doThing)
document.addEventListener('click', this.doThing)
document.addEventListener('keydown', this.doThing)

Которые также в конечном итоге должны быть удалены:

document.removeEventListener('mousemove', this.doThing)
document.removeEventListener('click', this.doThing)
document.removeEventListener('keydown', this.doThing)

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

Answer 1

Вы можете указать строку событий, разделенную пробелами, и проходить через них. Большинство библиотек, таких как jQuery.on(), делают что-то подобное.

function setEventsToDocument(events, callback) {
  events.split(' ').forEach(event => {
    document.addEventListener(event, callback)
  })
}

function removeEventsFromDocument(events, callback) {
  events.split(' ').forEach(event => {
    document.removeEventListener(event, callback)
  })
}

setEventsToDocument('mousemove click keydown', callback)

removeEventsFromDocument('mousemove click keydown', callback)

Answer 2

Да, создайте handleEvent функцию-член и укажите this в качестве обработчика события:

class Thing {
  constructor(el) {
    this.el = el;
    this.el.addEventListener("mouseover", this);
    this.el.addEventListener("click", this);
  }
  handleEvent(e) {
    switch (e.type) {
      case "mouseover":
        console.log("mouseover");
        break;
      case "click":
        console.log("click");
        break;
    }
  }
};

const thing = new Thing(document.getElementById("foo"));

<button id="foo">Hello</button>

Answer 3

Вы можете сделать что-то вроде:

["mousemove", "click", "keydown"].forEach(evt => document.addEventListener(evt, this.doThing));
["mousemove", "click", "keydown"].forEach(evt => document.removeEventListener(evt, this.doThing));

Простая универсальная версия с лямбдами может быть:

let addHandlers = (events, handler) => events.forEach(evt => document.addEventListener(evt, handler))
let removeHandlers = (events, handler) => events.forEach(evt => document.addEventListener(evt, handler))
addHandlers(["mousemove", "click"], this.doThing);
removeHandlers(["mousemove", "click"], this.doThing);