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