removeEventListner를 사용한 후에 왜 addEventListener를 사용할 수 없습니까?

Question

에 mdn "나는 제거한 후에도 EventListener를 호출 할 수 없습니다."라고 읽었지 만, 다시는 추가 할 수 없다는 의미는 아닙니다. 이것은 내가하는 일의 단순화 된 예입니다. 따라서이 예에서 사소한 구문 오류가있는 경우 무시할 수 있습니다 (구문 오류가 문제가 아니면).

function OhYeah(el){ 
    this.stuff = []; 

    this.stuff.push(new Obj(el)); 
} 

OhYeah.prototype = { 
    removeStuff: function() { 
     for(var i = 0; i < this.stuff.length; i++){ 
      this.stuff[i].selfDestruct(); // removes listener 
     } 

     this.stuff = []; 
    }, 

    addStuff: function(el) { 
     this.stuff.push(new Obj(el)); // should add listener on creation of Obj 
    } 
} 

function Obj(el) { 
    // some other properties not shown that can be different even if the same "el" is used to create a new Obj 

    this.domOBJ = document.getElementById(el); 

    this.domOBJ.addEventListener("input", this, false); 
} 


Obj.prototype = { 
    ... 

    handleEvent: function(){ 
     ... 
    }, 
    selfDestruct: function() { 
     this.domOBJ.removeEventListener("input", this, false); 
    } 
} 

var obj = new OhYeah("demo"); // adds listener successfully 

obj.removeStuff(); // removes listener successfully 
obj.addStuff("demo") // you would think this would add the listener, BUT it does NOT 

Answer 1

원본 코드에 구문 오류가 있습니다. 당신이 그 고정했지만 분명히 코드가 다음 작동하지 않기 때문에 그것은 다른 곳에서 다음 작품이어야합니다

여기

<input id="demo"> 

<script> 
function OhYeah(el){ 
    this.stuff = []; 
    this.stuff.push(new Obj(el)); 
} 

OhYeah.prototype = { 
    removeStuff: function() { 
     for(var i = 0; i < this.stuff.length; i++){ 
      this.stuff[i].selfDestruct(); // removes listener 
     } 
     this.stuff = []; 
    }, 

    addStuff: function(el) { 
     this.stuff.push(new Obj(el)); // adds listener on creation of Obj 
    } 
} 

function Obj(el) { 
    this.domOBJ = document.getElementById(el); 
    this.domOBJ.addEventListener("input", this, false); 
} 

Obj.prototype = { 
    handleEvent: function(){ 
      console.log('input...'); 
     } 
    }, 
    selfDestruct: function() { 
     this.domOBJ.removeEventListener("input", this, false); 
    } 
    } 

    var obj = new OhYeah("demo"); // adds listener successfully 

    obj.removeStuff(); // removes listener successfully 
    obj.addStuff("demo") // adds listener successfully 

</script> 

가 작동 보여주는 jsfiddle이다.

handleEvent 속성이 Obj.prototype이기 때문에 작동합니다. W3C DOM 3 Events Specification, eventListener interface을 참조하십시오.