Слушатель нескольких событий на одном и том же объекте не работает - PullRequest
Новая
       45

Слушатель нескольких событий на одном и том же объекте не работает

0 голосов
/ 17 февраля 2020

Возможно ли, чтобы два слушателя слушали одно и то же событие? У меня есть прослушиватель событий, который прослушивает видео-событие oncanplay, и в каком-то другом классе, в этом примере в тестовом классе, я должен прослушивать то же событие. 

<!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 будет запущен. Можно ли уволить оба события?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2020

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.

0 голосов
/ 18 февраля 2020

Запускается только назначенный обработчик события LAST, потому что вы назначили их как свойства. Попробуйте использовать addEventListener() вместо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...