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

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 语句在这个函数中而不是 2 个函数中提高音量和降低音量。

我试过这样做:

   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 == '函数'