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つ目に登録したイベントに第三引数のオプション、useCaptureにtrueを指定して検証しています。
useCaptureにtrueを指定して後で登録したイベントが先に実行されている事が確認できます。
target.addEventListener('click', click_event_func_1, false);
target.addEventListener('click', click_event_func_2, true);
// 2
// 1いずれもuseCaptureにtrueを指定した場合
いずれのイベントにもuseCaptureにtrueを指定した場合は、登録した順番にイベントが実行されます。
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