Question

我正在为Media API事件添加一个监听器，如下所示：

function addPlayListener() {
    var video = document.getElementById("theVideo");
    video.addEventListener('play',  function() {alert('play');}, false); // method a
video.addEventListener('play',  alert('play'), false); // method b
}
window.addEventListener('load', addPlayListener, false);


<video id="theVideo" controls width="180" height="160" src="sample_mpeg4.mp4"> </video>

使用方法，一切都按预期工作，但是使用方法b，一旦页面加载就会显示警报（并且在事件触发时不显示警告）。

为什么这样，方法b的语法有问题吗？

Answer 1

addEventListener的第二个参数必须是“当指定类型的事件发生时接收通知的对象。这必须是实现EventListener接口的对象，或者只是一个JavaScript函数。”在“方法b”中，警报立即被触发，因为它不在函数内，也不是实现EventListener接口的对象。方法A是普遍接受的语法。

Answer 2

在method b中，对话框会立即显示，因为您先调用它 - alert('play')。 addEventListener不能延迟其参数的执行，而是传递alert的{{1}}值 - 它不能用于：

return

// what's being passed after `alert('play')` is called video.addEventListener('play', true, false);中的function () { ... }正是延迟调用method a所需的内容，直到触发事件为止。 a函数本身被传递给alert('play')，并且可以在以后调用任意次数（即每次触发事件）。并且，每次调用时，它将依次执行其内容。

Answer 3

根据addEvenListener文件：

 target.addEventListener(type, listener[, useCapture]);

listener必须是：

对象，实现EventListener接口，
JavaScript功能

alert()函数不返回任何实现EventListener接口的对象，也不返回Javascript function。简单地说，alert不会返回任何内容。所以，你得到的是：

  video.addEventListener('play',  undefined , false);   //method b

为什么其中一个侦听器适用于Media API事件而不适用于另一个？

3 个答案: