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