How can I cancel this event listener

Question

I have four videos in one div and I have another one video in another div I have done an event listener that will apply for the all five video as you see

var videoAct = document.querySelectorAll('video'),
    mainVideo = document.getElementById('mainvideo'), // this id for the video in (mainV )
    allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video
    mainV = document.getElementById('mainv'); // this id for the div that contain one video

videoAct.forEach(function(video) {
    video.addEventListener('mouseover', function() {
        this.play();
        video.muted = true;
    });
    video.addEventListener('mouseleave', function() {
        this.pause();
    });
})

so how I remove this event listener from my one video in (mainV ) so that I work with its default setting

you can use removeEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener — zb22, Jul 21 '18 at 11:13
Why to remove the listener when you can simply ignore that element while adding event listener. @zb22 — Ankit Agarwal, Jul 21 '18 at 11:15

score 1 · Answer 1 · answered Jul 21 '18 at 11:15

1

You don't have to remove your event, just don't apply it...

var allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video
   videoAct = allVideo.querySelectorAll('video'); // look for videos only in the #allvideo div

videoAct.forEach(function(video){
   video.addEventListener('mouseover',function(){
      this.play();
      video.muted = true;  
   });
   video.addEventListener('mouseleave',function(){
      this.pause();    
   });
})

answered Jul 21 '18 at 11:15

Flash Thunder

11,672
8
47
91

i try but it didn't work , it give me this error in console ( allVideo.forEach is not a function ) – Mohamed Nageh Otafy Jul 21 '18 at 11:30
there is no `allVideo.forEach()` in the code I gave, so there is something wrong in your code, not in my answer... you should do `forEach()` on `videoAct` not on `allVideo` as `videoAct` contains list of `video` elements and `allVideo` is only a `div` that contains those `video` elements – Flash Thunder Jul 22 '18 at 14:48

score 0 · Accepted Answer · answered Jul 21 '18 at 11:14

0

You can check the id value of the video which you want to ignore inside the for loop so that the listener is not added to that video.

var videoAct = document.querySelectorAll('video'),
   mainVideo = document.getElementById('mainvideo'), // this id for the video in (mainV )
   allVideo = document.getElementById('allvideo'), // this id for the div that contain the four video
   mainV = document.getElementById('mainv'); // this id for the div that contain one video

videoAct.forEach(function(video){
  if(video.id !== 'mainvideo') {
    video.addEventListener('mouseover',function(){
       this.play();
       video.muted = true;  
    });
    video.addEventListener('mouseleave',function(){
       this.pause();    
    });
  }
})

answered Jul 21 '18 at 11:14

Ankit Agarwal

30,378
5
37
62

thanks alot man it work just fine :) – Mohamed Nageh Otafy Jul 21 '18 at 11:35
@MohamedNagehOtafy glad to help. :) – Ankit Agarwal Jul 21 '18 at 11:36
if i want to change the source of the video with ( id = mainVideo ) to any source from the four video when i click on any of them i try to add this code to if statement but it didn't work --> videoAct.forEach(function(video){ if(video.id !== 'mainvideo') { video.addEventListener('mouseover',function(){ this.play(); video.muted = true; }); video.addEventListener('mouseleave',function(){ this.pause(); }); video.addEventListener('click', function(){ var source = this.hasAttribute('src').value; mainVideo.src = src[source]; }) } }) <-- – Mohamed Nageh Otafy Jul 21 '18 at 12:36

How can I cancel this event listener

2 Answers2