【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することでスッキリした書き方になる。