removeEventListener가 작동하지 않는 이유

누군가가 removeHandler가 작동하지 않는 이유를 확인하는 데 도움을 줄 수 있습니까? 어떻게 작동 시키는가? 감사합니다. .removeEventListener가 작동하지 않는 이유

<body> 
    <button onclick="removeHandler()" id="myBtn">remove</button> 
    <p id="demo">hello</p> 

<script> 
document.getElementById("demo").addEventListener("click", myFunction("random: ")); 

function myFunction(t) { 
    var x = function(){ 
     document.getElementById("demo").innerHTML = t+Math.random(); 
    }; 
    return x; 
} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", myFunction("random: ")); 
} 
</script> 

</body>

출처

2017-04-26 Qiao Li

http://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working 또는 http://stackoverflow.com/questions/16651790/javascript-removeeventlistener-not -working-event-listener-remain 또는 http://stackoverflow.com/questions/5825493/removeeventlistener-is-not-working – epascarello

자바 스크립트 이벤트 리스너를 제거 할 때 매우 중요합니다. 이전에 추가 한 이벤트 리스너 만 제거 할 수 있습니다. 버블 링 여부도 일치시켜야합니다.

다른 말로하면 익명 이벤트 수신기를 식별 할 방법이 없기 때문에 제거 할 수 없다는 의미입니다.

귀하의 경우 실제로 새로 생성 된 이벤트 수신기를 제거하여 문제가 복잡해집니다.

이벤트 수신기를 제거하는 유일한 방법은 이름이 있는지 확인하는 것입니다. 다음과 같이 귀하의 경우, 그것은 다음과 같습니다

var random=myFunction("random: "); 
document.getElementById("demo").addEventListener("click", random,false); 

function myFunction(t) { 
    var x = function(){ 
     document.getElementById("demo").innerHTML = t+Math.random(); 
    }; 
    return x; 
} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", random,false); 
}

참고 : 나는 또한 false을 추가 한 이벤트 리스너 함수

을 식별 할 수있는 변수 이름 (이 경우 random가) 있습니다

제거가 추가와 일치하는지 확인하는 세 번째 매개 변수로 사용됩니다.

출처

2017-04-26 03:19:42 Manngo

고마워요. 지금 일하고있다. –

@QiaoLi anser를 수락 하시겠습니까? – Manngo

되풀이 myFunction은 각 호출에 대해 새로운 기능을 반환합니다. myFunction에 전화 할 때마다 새로운 함수를 생성 (정의)하고 반환합니다.

function myFunction() { 
 
    return function() {}; 
 
} 
 

 
var f1 = myFunction(); 
 
var f2 = myFunction(); 
 

 
console.log(f1 === f2);

FIX :

var f = myFunction("random: "); document.getElementById("demo").addEventListener("click", f, false); // ... document.getElementById("demo").removeEventListener("click", f);
: 당신은 변수에 myFunction의 반환 값을 저장 한 다음 모두 addEventListener 및 removeEventListener에 그 변수를 전달해야

출처

2017-04-26 03:12:33

* "작동 방법"* – nnnnnn

감사합니다. 그런 다음이 방법으로 추가 된 처리기 함수를 제거하는 방법이 있습니까? –

@QiaoLi 그러면 myFunction은 같은 함수를 반환해야합니다. –

데모 함수 호출을 클릭 할 때마다 새로운 함수가 반환 될 때마다 예상대로 작동하지 않는 것처럼 보입니다.

시도 실행 Example

<body> 


    <p id="demo">Hello</p> 
    <button onclick="removeHandler()" id="myBtn">Try it</button> 

<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p> 


<script> 
document.getElementById("demo").addEventListener("click", myFunction); 

function myFunction() { 

    document.getElementById("demo").innerHTML = Math.random(); 


} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", myFunction); 
} 
</script>

출처

2017-04-26 03:44:52

removeEventListener가 작동하지 않는 이유

답변

관련 문제