JavaScript | イベントを一度だけ実行して破棄する方法
JavascriptのaddEventListener()でイベントを一度だけ実行して破棄する方法を紹介しています。
イベントを一度だけ実行して破棄する実装サンプル
addEventListener()メソッドを使ったイベントを一度だけ実行して破棄・削除する実装サンプルとサンプルコードになります。
See the Pen JavaScript | Do not execute the event of the parent element 02 by yochans (@yochans) on CodePen.
HTMLにはテスト用の要素を破棄しないタイプと一回で破棄するタイプ用の2つを<p>タグで設置しています。
<p class="item-1">0</p>
<p class="item-2">0</p>イベントを一回で破棄するのであれば、addEventListener()メソッドのオプション設定でonce: trueを使うことで実装する事が可能です。
何回実行したら削除する、といった回数を指定できないのがネックですが、無名関数で定義したイベントでも実行時に即時削除できるメリットがあります。
addEventListener()メソッドのオプション引数は複数種類あるためuseCaptureのみの場合以外は{}で括ってオブジェクトとして定義します。
// イベントを一度で破棄しない場合
document.querySelector(`.item-1`).addEventListener(`click`, () => {
event.currentTarget.textContent = parseInt(event.currentTarget.textContent) + 1;
});
// イベントを一度だけ実行して破棄する場合
document.querySelector(`.item-2`).addEventListener(`click`, () => {
event.currentTarget.textContent = parseInt(event.currentTarget.textContent) + 1;
}, {once: true});関数を定義する場合であれば、方法は多く存在すると思われますが、1回のみの実行で削除するという事であれば同じようにオプションでonce: trueを指定しておくのが簡単な方法となります。
Target.addEventListener(イベントの種類, 呼び出し関数, {once: true});