2022.06.23レシピイベント1度だけのイベントリスナーを設定するイベントリスナーを1度だけ発生するように登録する方法について解説します。この記事のポイントaddEventListenerメソッドの第3パラメータにオプションonce指定する目次1度だけのイベントリスナーを登録する1度だけのイベントリスナーで連続して発生するイベントを拾わないようにする1度だけのイベントリスナーを登録するaddEventListenerメソッドは第3パラメータのオプションでonceをtrueにすると、1度だけ実行するように設定することができます。以下の例では、id属性が「btn_once」のHTML要素に対して1度だけのイベントリスナーを設定し、クリックされたら1度だけ処理を実行するように指定しています。1度だけのイベントリスナーにするオプション});});上記のコードを実行すると、btn_onceのHTML要素を2回以上クリックしてもconsole.logメソッドは1度しか実行されません。1度だけのイベントリスナーで連続して発生するイベントを拾わないようにする1度だけのイベントリスナーを活用することで、ボタンを何度も続けてクリックされてしまったときなどに発生する複数のイベントを未然に防ぐことができます。ボタンを押したらAjaxによるデータ送信が発生するような場合、ボタンを連続して何度も押すと押した回数だけ通信が発生してしまいますが、そのような多重送信を防ぐことができるようになります。以下の例ではid属性が「btn_once」のHTML要素に対して、クリックしたら1度だけsendData関数を実行するようにイベントリスナーを設定します。Ajaxが完了した後に、1度だけのイベントリスナーを再設定することで、Ajaxの実行途中で多重送信されることを防ぎます。1度だけのイベントリスナーにするオプション});});});});以上、1度だけのイベントリスナーを設定する方法についてでした。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。要件を満たすコードをササッと書けて、どこでも通用するような凄いエンジニアになりたい。エンジニアをやっていると、そんな憧れや「個人の能力・スキル」重視の思考に陥ったことが一度はあるのではないでしょうか。本書はそんな個人思考から脱却し、より広い視点を持ちながら効率良い開発を進められるようなエンジニアの参考にすべき考え方が詰まっています。