Javascript 为什么删除父子事件后要删除eventListener

Javascript 为什么删除父子事件后要删除eventListener,javascript,for-loop,addeventlistener,Javascript,For Loop,Addeventlistener,我有三个不同的事件侦听器,一个用于打开灯箱,一个用于关闭灯箱,还有一个用于添加watch later功能 因此,单击“关闭”按钮后,EventListener不再存在。基本代码示例: var a ={ open_lightbox:function(ele){ ele.addEventListener('click',function(){ //code that creates dynamic html and so forth. },false

我有三个不同的事件侦听器,一个用于打开灯箱,一个用于关闭灯箱,还有一个用于添加watch later功能

因此,单击“关闭”按钮后,EventListener不再存在。基本代码示例:

var a ={
   open_lightbox:function(ele){
      ele.addEventListener('click',function(){
          //code that creates dynamic html and so forth.
      },false); 
    }, 
   close_lightbox:function(){
      var closer = a.get('.lightbox_close')[0];
      closer.addEventListener('click',function(){
        var p = this.parentNode.parentNode.parentNode;
        p.parentNode.removeChild(p);
      },false);
    },
   watch_later:function(ele){
        ele.addEventListener('click',function(){
           //uses localStorage to save data and then adds parameters
        },false);
    },
   get:function(ele){ return document.querySelectorAll(ele); }
 };

  var lightbox = a.get('.lightbox_button'),i;
  for(i=0;i<lightbox.length;i++){
     a.open_lightbox(lightbox[i]);
   }
var a={
打开照明箱:功能(ele){
ele.addEventListener('click',function(){
//创建动态html等的代码。
},假);
}, 
关闭\u灯箱:函数(){
var closer=a.get('.lightbox_close')[0];
closer.addEventListener('click',function(){
var p=this.parentNode.parentNode.parentNode;
p、 parentNode.removeChild(p);
},假);
},
稍后观看:功能(ele){
ele.addEventListener('click',function(){
//使用localStorage保存数据,然后添加参数
},假);
},
get:function(ele){returndocument.queryselectoral(ele);}
};
var lightbox=a.get('.lightbox_按钮'),i;

对于(i=0;i我将尝试不删除元素,而是隐藏它

你可以用

p.style.display=“无”

而不是


p.parentNode.removeChild(p);

我不能100%确定为什么这会取消每个事件的事件侦听器,尽管我确实找到了一种更具语义的方法。这就是

document.addEventListener('click',function(e){
      if(/lightbox_btn/gi.test(e.target.className)){
        //perform the code
      }
},false);

因此,实际上我只是将事件侦听器添加到文档中,而不是元素本身。它现在可以正常工作了

如果您可以向我们展示HTML的外观,那么我们就不需要阅读水晶球。这是真的,我在想,这可能只是我的javascript中的一些愚蠢的东西。我会尝试使用htmlI更新,因为我已经更新了问题我已经尝试了你的小提琴。当我点击图像时,我可以看到添加到DOM中的lightbox\u close DIV,但我在页面上看不到它。我是否遗漏了什么?这是真的,但是我必须动态更改lightbox中需要更改的所有内容。它需要正确地排序一旦这个代码变得更深入,将会有太多的数据需要更改。我也一直在考虑它,因为它会降低“以后观看”列表中的数据负载,因为如果他们在以后观看100个视频,则需要加载100个图像。如果我需要更改所有数据属性和所有其他需要更改的内容,这将非常糟糕将需要更改。尽管如此,这可能是最好的选择,因为“以后观看”列表将具有相同的概念,需要更改所有内容。因此,请投票给你,如果我决定隐藏,我会将你的标记为正确,然后你可以使用
replaceChild()
而不是
appendChild()
当您创建p元素时,元素将被简单地更改。这是事实,我需要处理其中的一些问题,因为随着视频的不断播放,“无显示”部分并不是最合适的。我没有使用YT API来尽可能地将其保持在较小的范围内。好吧,现在的问题是,实际的事件处理程序在播放之后正在消失第一次单击不是在关闭器上单击