javascript - removeEventListener を使用しているにもかかわらず、複数のイベント リスナーを登録する

Question

これは私を夢中にさせています。removeEventListener() でそれらを削除しているにもかかわらず、複数の mouseout イベントが登録されています。私はこれのあらゆる種類のバリエーションを試しました。基本的に、mouseout イベントが発生したら、ユーザーが別の画像をロールオーバーして大きなプレビューを表示するため、それを取り除きたいと考えています。正常に動作しますが、登録された複数のイベントが私を悩ませています。

this.removeEventListener('mouseout', handler, false);

そして何もありません。ここで何をしているのかわかりません。マウスアウト イベントを取り除くことができないようで、それらは積み重なっていきます。

document.querySelector('.grid').addEventListener('mouseover',function(e) {
  if (e.target.tagName==='IMG') {
    var myElement=document.createElement('div');
      myElement.className='preview';
      e.target.parentNode.appendChild(myElement);

    var handler = e.target.addEventListener('mouseout', function (d) {
      var myNode = d.target.parentNode.querySelector('div.preview');
      console.log(d.target.parentNode);
      if (myNode) {
        myNode.parentNode.removeChild(myNode);
      }
      this.removeEventListener('mouseout', handler, false);
    });
  } //
}, false); // addEventListener