Question

我是HTML5 / Javascript / CSS3的新手，我对确切如何将我的事件监听器的id传递给新函数感到困惑。我正在构建一个视频播放器，这是音量增大和减小的部分，我宁愿能够使用if语句使用一个函数同时进行音量增大和音量减小，这将检查id。

以下是我正在使用的内容：

 volume_up = document.getElementById('volume_up'); //get the volume_up button
 volume_up.addEventListener('click', volumeUp, false); //call function "volumeUp" on click

这是“volumeUp”功能：

function volumeUp(click_button){
alert(click_button.id); // i want to be able to get the id here
myMovie.volume = myMovie.volume - 0.1;
}

如果我能够获得ID，我可以通过if语句在这一个函数中进行vol up和vol down。

我试过这样做：

   volume_up.addEventListener('click', volumeUp(volume_up), false);

和

    volume_up.addEventListener('click', volumeUp(volume_up.id), false);

没有运气。我已将音量增大按钮链接起来，每当按下它时，音量确实会改变，警报会弹出，但它显示未定义。

任何帮助将不胜感激。谢谢:)

Answer 1

document.getElementById('volume_up').addEventListener('click', _volume, false);
document.getElementById('volume_down').addEventListener('click', _volume, false);

function _volume(event){
    if(this.id == 'volume_up') {
        myMovie.volume += 0.1;
    } else {
        myMovie.volume -= 0.1;
    }
}

这只是一个例子。您需要使用一些防御性逻辑来检查IE，并在适用时使用attachEvent。

这些不起作用的原因......

volume_up.addEventListener('click', volumeUp(volume_up), false);
volume_up.addEventListener('click', volumeUp(volume_up.id), false);

...是因为你正在调用该函数并传递volumeUp的结果作为回调，这不是typeof == 'function'

Answer 2

在事件处理程序中，“this”绑定到触发事件的元素，因此您只需使用“this.id”。

查看此示例：http://jsfiddle.net/vyGdJ/

如何在事件监听器单击后将ID传递给函数

2 个答案: