javascript - 访问嵌套事件绑定(bind) JavaScript 中的对象

Question

我正在尝试在音频结束事件中绑定(bind)音频重播事件。我无法访问附加了音频结束事件的实际父对象。

var audio = new Audio('audiofile.mp3');
audio.addEventListener('ended', function() {
    $("#replayButton").bind('click', function(){
        audio.play(); //why i couldn't access the audio object
    });
});

Answer 1

您可以在外部函数中绑定(bind)变量:

audio.addEventListener('ended', function() {
    var self = this;
    $("#replayButton").bind('click', function(){
        self.play(); //why i couldn't access the audio object
    });
});

但是，将一个事件处理程序绑定(bind)到另一个事件处理程序中通常不是一个好主意。当您重播音频时，当它结束时，您将绑定(bind)另一个点击处理程序。因此，如果用户再次单击重播按钮，它将开始播放两次。

.one() 方法可能更适合这种情况，因此 click 处理程序仅在每次结束后运行一次。所以应该是:

audio.addEventListener('ended', function() {
    var self = this;
    $("#replayButton").one('click', function(){
        self.play(); //why i couldn't access the audio object
    });
});