複数のaddEventListenerを一つにまとめられるか

Question

1の書き方から2のような書き方でaddEventListenerを複数設定する方法はありませんでしょうか

1

<script>
window.onload=function(){
div.addEventListener('click', function() {
a();
});
div.addEventListener('mouseleave', function() {
a();
});

function a(){
alert("clickまたはmouseleaveで反応");
}
}
</script>
<div id="div" style="width:300px;height:300px;background:black"></div>

2

<script>
window.onload=function(){
div.addEventListener('click,mouseleave', function() {
alert("clickまたはmouseleaveで反応");
});
}
</script>

<div id="div" style="width:300px;height:300px;background:black"></div>

Answer 1

stackoverflow に同じような質問がありよったで。

いくつか回答ついてるけど、一番上の forEach 使うやつでどないでっか？ これ式でやるんであれば、

const wrapA = function() {
  a();
}

とかってしておいて、

['click','dblclick'].forEach(evt => 
    div.addEventListener(evt, wrapA, false)
);

みたいなことになるねんな。

それか、ベストアンサーに選ばれとる回答の addMultipleListeners() をちょっとコピペしてお借りするとして、

addMultipleListeners(
    div,
    ['click','dblclick'],
    wrapA,
    false);

とするとかやな。

Answer 2

まず、無駄に無名関数式を使用しているコードを修正して下さい。

/**
 * bad
 */
div.addEventListener('click', function() {
  a();
});

/**
 * good
 */
div.addEventListener('click', a);

その上で、イベントタイプを配列にし、for-of 等で列挙すれば良いでしょう。

for (let type of ['click','mouseleave']) {
  div.addEventListener(type, a);
}

Re: rfd さん