eventListener多次發射並增加

Question

在點擊功能中，我可以選擇播放音頻。

點擊只會觸發一次（在我添加了.off()後，我似乎必須爲每個點擊事件執行操作，因爲我認爲我從根本上無法瞭解javascript的工作原理），但添加到「結束「的監聽程序顯示它觸發按鈕被點擊的次數。我猜想.play()也被解僱多次。

這些需要在點擊事件內部才能得到id，那麼如何在使用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="">