ある要素に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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。