JavaScript｜eventオブジェクトで呼び出し元を判定する

イベント発生時にeventオブジェクトを参照することでイベント発生情報を取得することが可能です。

安易に考えるとaddEventListenerでfunctionを呼び出すときに引数を渡せば可能じゃないか！！って思うかもしれません。

それではちょっと問題があります。

addEventListenerの落とし穴

通常のaddEventListenerの使い方。

let elm =   document.getElementById("id01");
elm.addEventListener("click",myFunc);

通常はこのようにしますが、これではfunctionに引数を渡せません。

ついしたくなる例。

let elm =   document.getElementById("id01");
elm.addEventListener("click",myFunc("elmName"));

これはエラーとなり動作しません。

ならばこれでどうだ！！。

let elm =   document.getElementById("id01");
elm.addEventListener("click",function()
{
    myFunc("elmName");
});

確かに動作はしますが・・・・・removeEventListenerが効かないんですよぉ！！。

そこで登場するのがeventオブジェクトの参照です。

eventオブジェクトを参照することでイベント発生情報を取得することができます。

myFunc  =   (e)  =>  {
    let eventTargetId   =   e.target.id;
}

let elm =   document.getElementById("id01");
elm.addEventListener("click",myFunc);

これで読み出し元のidを取得することができます。

これで読み出し元別に処理を分岐することが可能になります。

引数も必要ないしremoveEventListenerもちゃんと機能します。