eventListener多次触发并增加

Question

在点击功能上，我可以选择播放音频。

点击只被触发一次（在我添加.off()之后，我似乎必须为每次点击事件做，因为我认为我从根本上没有了解javascript如何工作）但是添加到“已结束”的监听器的功能显示它触发按钮被点击的次数。我认为.play()也被多次开除。

这些需要在click事件中获取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");

这是重复将事件监听器添加到按钮。如果您在click事件中需要这个，请检查它是否已存在。如果是，请不要再次添加。

Answer 3

使用全局标志，定义您是要暂停还是播放。并且还使用preventDefault（在使用任何内联点击事件的情况下）。

Answer 4

您必须在任务完成后删除已注册的事件侦听器。

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

或者你可以做的是移动在click事件监听器之外注册事件监听器的逻辑。像这样，活动只会被注册一次。

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="">