javascript addEventListenerの挙動について

Question

理解できない挙動のコード

<script>

window.onload=function(){
  cv=document.getElementById('canvas');
  cv.addEventListener('mouseover',fun);
  function fun(){
    cv.addEventListener('mouseleave',exe);// マウスが離れる時のイベント
    function exe(){
      console.log(1);
    }
  }
}

</script>
<canvas id="canvas"></canvas>

理解できないこと
設置したcanvasからマウスが離れる時のイベントを、addEventListener('mouseleave',exe)で設定していますが、マウスがcanvasから離れる処理を連続で行うと、このリスナーを呼ぶ回数が、1,3,6,10,15,21と増えていきます。canvasを離れるときに発火するリスナーイベントは1回になると思ったのですが、なぜ回数分だけリスナーイベントが発火するようになってしまうのでしょうか？

Answer 1

なぜ回数分だけリスナーイベントが発火するようになってしまうのでしょうか？

mouseenter時に毎回別な関数でmouseleaveのイベントリスナーをセットしているからです。

イベントリスナーは、普通に設定すれば「1回だけで終わり」とはならず、セット以降はずっと動作し続けます。

Comments

[maisumakun]

なお、同じ関数をaddEventListenerした場合は、重複追加されることはありません。

fun内のexeは、funの実行ごとに別の関数となります。

[old_dog]

maisumakunさん、ありがとうございました。なるほどです。実際のコードではmouseleaveイベントは、関数内関数ではなく、独立した関数にしてますので、重複しないようにしています。今回もとても勉強になりました。いつもいつもありがとうございます。