【JavaScript】addEventListenerで複数イベントを同時設定する

やりたいこと

$(".sample").on("click mouseover", () => {
  // some process
});

jQueryだと上記の記法で同一要素に対してイベントを複数設定できる。

document.querySelector(".sample").addEventListener("click mouseover", () => {
  // some process
});

しかしVanilla JSだとaddEventListenerに指定できるのは1種類のイベントのみなので、jQueryのように書くことはできない。

解決法

["click", "mouseover"].forEach((eventType) => {
  document.querySelector(".sample").addEventListener(eventType, () => {
    // some process
  });
});

あらかじめeventTypeを配列として定義しそのループの中でaddEventListenerすることでスッキリした書き方になる。