addEventListenerを使ってイベントを一度だけ設定したい

ある要素にaddEventListenerが複数回実行された場合にも、イベントの設定が一度だけになるようにしたいと思っています。確認のために、簡単なリストを示します。

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>Eventのテスト</title>
6</head>
7<body>
8  <button id="event-tuika">イベント追加</button>
9  <button id="event-do">イベント発動</button>
10<script>
11  'use strict';
12
13  var tuika = function(){
14    var doButton = document.getElementById('event-do');
15
16    var event = function(){
17      console.log('Done ... ' + i);
18      i ++;
19    };
20    doButton.addEventListener("click", event);
21  }
22
23  var i = 0;
24  var tuikaButton = document.getElementById('event-tuika');
25  tuikaButton.addEventListener("click", tuika);
26</script>
27</body>
28</html>

最初は「イベント発動」ボタンを押してもコンソールには何も表示されませんが、「イベント追加」ボタンを押すと、イベントが追加されてコンソールにメッセージが出力されます。この「イベント追加」ボタンを複数回押した場合イベントが複数回追加されて、一度「イベント発動」ボタンを押したときのメッセージが2行、3行... と増えていきます。このときにメッセージが増えず、メッセージが1行だけ出力されるようにしたい、というのが所望の動作になります。

この例は単純化しているため、以下のようにflagをつかって1度だけ実行するようにしても済んでしまうのですが、それ以外の方法を探しています。

JavaScript
1<script>
2  'use strict';
3  var flag = true;
4
5  var tuika = function(){
6    var doButton = document.getElementById('event-do');
7
8    var event = function(){
9      console.log('Done ... ' + i);
10      i ++;
11    };
12    if(flag){
13      doButton.addEventListener("click", event);
14      flag = false;
15    }
16  }
17
18  var i = 0;
19  var tuikaButton = document.getElementById('event-tuika');
20  tuikaButton.addEventListener("click", tuika);
21</script>

removeEventListenerを適切に使えばうまくいくような気がするのですが...

以上、よろしくお願いいたします。

行動規範の内容に同意します

回答3件

ベストアンサー

addの前にremoveをすればよいのではないでしょうか？

javascript
1doButton.removeEventListener("click", event);
2doButton.addEventListener("click", event);

または、tuikaButtonクリック時に自身をremoveするとか

javascript
1var tuika = function(){
2    tuikaButton.removeEventListener("click", tuika);
3               　:
4  }

投稿2018/11/03 00:21

退会済みユーザー

総合スコア0

こんにちは。

removeEventListenerを適切に使えばうまくいくような気がするのですが...

仰るように、removeEventListener を使うことでも出来そうですが、以下の投稿

stackoverflow: Remove All Event Listeners of Specific Type

に対する以下の回答

https://stackoverflow.com/a/19470348

が参考になるかもしれません。すなわち、この回答に挙げられている以下のコード

javascript
1var el = document.getElementById('el-id'),
2    elClone = el.cloneNode(true);
3
4el.parentNode.replaceChild(elClone, el);

にならって、クローンされたボタンで置き換えるというのはいかがでしょう？以下、上記のコードをもとに、HajimeHamadaさんのコードにクローンして置き換えるロジックを追加したものです。

javascript
1var tuika = function(){
2    var doButtonOrig = document.getElementById('event-do');
3    var doButton = doButtonOrig.cloneNode(true);
4    
5    var event = function(){
6      console.log('Done ... ' + i);
7      i ++;
8    };
9    
10    doButton.addEventListener("click", event);
11    doButtonOrig.parentNode.replaceChild(doButton, doButtonOrig);
12};
13
14var i = 0;
15var tuikaButton = document.getElementById('event-tuika');
16tuikaButton.addEventListener("click", tuika);