访问嵌套事件绑定javascript中的对象

access object inside nested event binding javascript

本文关键字:对象 javascript 绑定 嵌套 事件 访问      更新时间:2023-09-26

Am正在尝试将音频回放事件绑定到音频结束的事件中。我无法访问我附加了音频结束事件的实际父对象。

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

您可以在外部函数中绑定一个变量:

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

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

.one()方法可能更适合于此,因此click处理程序在每次结束后只运行一次。所以应该是:

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