同一对象上的多个事件侦听器不起作用

Question

是否可以让两个监听器监听同一个事件？我有一个事件监听器监听 oncanplay 视频事件，在其他一些 class 中，在这个例子中是测试 class，我必须监听相同的事件。

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

<video id="myVideo" width="320" height="176" autoplay>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 

const test = () => {

  vid.oncanplay = function() {
  console.log("CAN PLAY 2!")
};
}

var vid = document.getElementById("myVideo"); 
test();

  vid.oncanplay = function() {
  console.log("CAN PLAY 1!")
};

function playVid() { 
  vid.play(); 
} 

function pauseVid() { 
  vid.pause(); 
} 
</script> 

</body> 
</html>

在这种情况下，只会触发 CAN PLAY 1。如果我删除 CAN PLAY 1 监听器，CAN PLAY 2 将被解雇。我可以同时触发这两个事件吗？

Answer 1

只有分配的最后一个事件处理程序获得运行，因为您将它们分配为属性。请尝试使用 addEventListener()。

Answer 2

oncanplay是一个属性对象，可以多次赋值，但只有最后一次赋值才有意义，因为你覆盖了值。

就像...

a=2;
a=1;
console.log(a);
//as you'd expect, it would output the value of 1

正如所建议的那样，您可以使用

在对象上放置多个事件侦听器

vid.addEventListener("canplay",
                     function() {
                        console.log("CAN PLAY 1!");
                      });

...因为 addEventListener 不会覆盖以前创建的事件侦听器。

此外，请记住，使用匿名函数执行此操作将使以后很难删除事件侦听器；因为，作为匿名，没有命名引用允许您在 removeEventListener 请求期间访问它。

同一对象上的多个事件侦听器不起作用

Multiple event listener on the same object not working

javascript

event-listener

dom-events