eventListenerを複数回起動して増加する

Question

クリック機能では、オーディオを再生するオプションがあります。

クリックは1回だけ発生します（.off()を追加した後、クリックイベントごとに行う必要があるようですが、私は基本的にjavascriptの仕組みについては理解していないと思うので）ボタンがクリックされた回数を発していることを示しています。私も.play()と推定されていますが、複数回解雇されています。

これらはidを取得するためにclickイベントの内側にある必要があります.jsを使用する場合、これらの種類の事態をここ、そして他の場所でどうやって止めるのですか？ event.stopPropagation()を追加すると、どこにでもevent.bubbles = falseと.off()が不要になります（この場合は違いはありません）。

$('.button').off().on('click', function(event){ 
    event.stopPropagation(); 
    event.bubbles = false; 
    var id = $(this).attr('id') 
    if ($(this).hasClass('hasAudio')) { 
     document.getElementById('audio_'+id).play(); 
     document.getElementById('audio_'+id).addEventListener("ended", function(){ 
      console.log("ended"); 
     }); 
    } 
}); 

Answer 1

あなたがイベントを登録するクリックイベントの外 endedイベントを移動

、あなたがボタンの上に

$('.button').on('click', function(event){ 
    var id = $(this).attr('id') 
    if ($(this).hasClass('hasAudio')) { 
     document.getElementById('audio_'+id).play(); 

    } 
}); 
$('[id^="audio_"]').on("ended", function(){ 
    console.log("ended"); 
}); 

Answer 2

この機能をクリックするたびに、ボタンに新しいイベントリスナーが追加されるため、これは失敗します。

 document.getElementById('audio_'+id).addEventListener("ended", function(){ 
     console.log("ended"); 

これを繰り返し、それが既に存在するかどうかを確認し、あなたがクリックイベント内でこれを必要とbutton.Ifにイベントリスナーを追加しています。そうであれば、もう一度追加しないでください。

Answer 3

一時停止または再生するかどうかを定義するグローバルフラグを使用します。 preventDefault（インラインクリックイベントが使用されている場合）も使用します。

Answer 4

をクリックするたびにあなたは、あなたのタスクが完了した後に登録したイベントリスナーを削除する必要があります。

document.getElementById('audio_'+id).removeEventListener("ended", function(){ 
     console.log("ended"); 
    }); 

または、イベントリスナーをクリックイベントリスナーの外部に登録するロジックを移動することができます。このようにイベントは一度だけ登録されます。

document.getElementById('audio_'+id).addEventListener("ended", function(){ 
     console.log("ended"); 
    }); 
} 

$('.button').off().on('click', function(event){ 
event.stopPropagation(); 
event.bubbles = false; 
var id = $(this).attr('id') 
if ($(this).hasClass('hasAudio')) { 
    document.getElementById('audio_'+id).play(); 
}); 

Answer 5

あなたがボタンの上に新しいイベントリスナーをクリックするたびにendedイベントに追加されます。これを防ぐために、前もってコールバック関数を定義してみてください。これにより、イベントリスナーがイベントループに何度も追加されることはありません。

匿名関数には署名がないため、イベントを定義すると、これは新しいイベントリスナーであると考えられ、複数回呼び出されます。違いを確認するには、作業中のスニペットを確認してください。入力ボックスに何かを入力して、何が起きているのかを確認します。

これが混乱している場合は、removeEventListenerを次のオプションにすることができます。

function ended(event){ 
    console.log("ended"); 
} 

$('.button').off().on('click', function(event){ 
    event.stopPropagation(); 
    event.bubbles = false; 
    var id = $(this).attr('id') 
    if ($(this).hasClass('hasAudio')) { 
     document.getElementById('audio_'+id).play(); 
     document.getElementById('audio_'+id).addEventListener("ended", ended); 
    } 
}); 

var input = document.getElementById('some'); 
 

 

 
function callback(event) { 
 
    console.log("PRINT"); 
 
} 
 

 
input.addEventListener("keyup", callback) 
 

 
// input.removeEventListener("keyup", callback) 
 

 
input.addEventListener("keyup", callback)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="some" value="" >

コールバックとして無名関数

var input = document.getElementById('some'); 
 

 
input.addEventListener("keyup", function(event) { 
 
    console.log("PRINT"); 
 
}) 
 

 
// input.removeEventListener("keyup", callback) 
 

 
input.addEventListener("keyup", function(event) { 
 
    console.log("PRINT"); 
 
})

<input id="some" value="">