addEventListener登録時に関数を実行させない方法

JavaScript

こんにちは、
今回は、addEventListener登録時に関数を実行させない方法を記します。

javascriptでaddEventListenerを使用してイベントをトリガーに関数を実行したいとき、
引数があると、登録時に実行されてしまいます。

引数がない場合は、通常通りの記述で良いですが、

//実行されない
element.addEventListener("click",test);

function test(){
  console.log("実行されない")
}

引数がある場合、要素に対してイベントリスナーを追加した時点で関数が実行されます。

//実行される
element.addEventListener("click",test("hello"));
function test(msg){
 console.log(msg)
}
//出力:hello

 

即時関数内で関数を呼び出せば実行されない

引数がある場合は即時関数内で引数ありの関数を実行することで
登録に関数が実行されることはなく、イベント実行時のみ関数を呼び出すことが可能です。

//イベント実行時のみ
element.addEventListener("click",function(){ test("hello");});

function test(msg){
 console.log(msg);
}

「function(){ 関数(引数)}」とすることでイベントトリガーでのみ実行可能です。

以上です。

コメント

タイトルとURLをコピーしました