JavaScript | 要素に登録したイベントの実行順序を変更する方法

JavaScript イベント,JavaScript

JavaScript | 要素に登録したイベントの実行順序を変更する方法

Javascriptで要素にaddEventListener()で指定・登録したイベントの実行順序を変更する方法を紹介しています。

要素に指定したイベントの実行順序を変更する

JavascriptのaddEventListener()を使って指定したイベントの実行順序を変更するサンプルコードになります。

addEventListener()は登録(追加)した順番にイベントが実行される仕組みになっています。

サンプルでは様々なパターンで以下の2つの関数を要素に対して同じイベントの種類(click)で実行するイベントを登録して結果を確認しています。

let click_event_func_1 = () => {
  console.log('1');
};

let click_event_func_2 = () => {
  console.log('2');
};

普通にイベントを登録した場合

通常通りイベントを登録して実行した結果になります。

第三引数のfalseは省略可能です。

登録した順番にイベントが実行されている事が確認できます。

target.addEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_2, false);

// 1
// 2

後で登録したイベントにuseCaptureにtrueを指定した場合

2つ目に登録したイベントに第三引数のオプション、useCapturetrueを指定して検証しています。

useCapturetrueを指定して後で登録したイベントが先に実行されている事が確認できます。

target.addEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_2, true);

// 2
// 1

いずれもuseCaptureにtrueを指定した場合

いずれのイベントにもuseCapturetrueを指定した場合は、登録した順番にイベントが実行されます。

target.addEventListener('click', click_event_func_1, true);
target.addEventListener('click', click_event_func_2, true);

// 1
// 2

同じイベントを最登録した場合

同じトリガーで関数、オプションのイベントを後で再登録した場合の結果は、最初に登録した順番で実行される事が確認できます。

まったく同じ内容のイベントを再登録した場合は、重複して実行される事はありません。

target.addEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_2, false);
target.addEventListener('click', click_event_func_1, false);

// 1
// 2

イベントを削除してから再登録した場合

removeEventListener()を使って先に登録したイベントを一度削除してから再登録した場合は、順番が入れ替わる事が確認できます。

同じトリガーアクションのイベントを複数種類登録する事は少ないかもしれませんが、useCaptureの値変更はイベントが3つ以上あると把握するのが困難になりますし他の部分にも影響が出る可能性がありますので、イベントを削除してから再登録して順番を並び替える方法が良さそうです。

target.addEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_2, false);
target.removeEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_1, false);

// 2
// 1

関連:JavaScript | 作成・追加したイベントを削除する方法 | ONE NOTES

関連:JavaScript | イベントの複数指定と上書きをする方法 | ONE NOTES