[javascript] Javascript removeEventListener가 작동하지 않습니다.

eventListener를 추가하려면 다음 코드가 있습니다.

 area.addEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

예상대로 올바르게 작동합니다. 나중에 다른 함수에서 다음 코드를 사용하여 이벤트 리스너를 제거하려고했습니다.

 area.removeEventListener('click',function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          },true);

하지만 짝수 리스너가 제거되지 않았습니다. 왜 발생합니까? 내 removeEventListener ()에 문제가 있습니까? 참고 : 여기에 document.getElementById ( ‘myId’)와 같은 영역이 있습니다.



답변

두 개의 익명 함수가 완전히 다른 함수이기 때문입니다. 귀하 removeEventListener의 인수는 이전에 부착 된 함수 객체에 대한 참조하지 않습니다.

function foo(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          }
 area.addEventListener('click',foo,true);
 area.removeEventListener('click',foo,true);


답변

Windows 개체의 경우 마지막 매개 변수 “true”가 필요합니다. 캡처 플래그가 없으면 제거가 작동하지 않습니다.


답변

두 호출 모두에서 두 가지 다른 함수를 만들고 있습니다. 따라서 두 번째 기능은 첫 번째 기능과 어떤 식 으로든 관련이 없으며 엔진은 기능을 제거 할 수 있습니다. 대신 함수에 대한 공통 식별자를 사용하십시오.

var handler = function(event) {
              app.addSpot(event.clientX,event.clientY);
              app.addFlag = 1;
          };
area.addEventListener('click', handler,true);

나중에 다음을 호출하여 핸들러를 제거 할 수 있습니다.

area.removeEventListener('click', handler,true);


답변

제거하려면 함수를 변수에 저장하거나 이름이 지정된 함수를 사용하고 해당 함수를 removeEventListener호출에 전달 하십시오.

function areaClicked(event) {
    app.addSpot(event.clientX, event.clientY);
    app.addFlag = 1;
}

area.addEventListener('click', areaClicked, true);
// ...
area.removeEventListener('click', areaClicked, true);


답변

이벤트 리스너가 호출하는 함수에 지역 변수를 전달하려면 함수 내부에 함수를 정의하고 (지역 변수를 가져 오기 위해) 함수 자체에 함수 이름을 전달할 수 있습니다. 예를 들어 app을 로컬 변수로 사용하여 이벤트 리스너를 추가하는 함수 내에서 시작해 보겠습니다. 이 함수 안에 다음과 같은 함수를 작성합니다.

function yourFunction () {
    var app;

    function waitListen () {
        waitExecute(app, waitListen);
    }

    area.addEventListener('click', waitListen, true);
}

그런 다음 waitExecute가 호출 될 때 제거해야하는 것이 있습니다.

function waitExecute (app, waitListen) {
    ... // other code
    area.removeEventListener('click', waitListen, true);
}


답변

먼저 이벤트 핸들러를 정의하고

그리고

area.addEventListener('click',handler);
area.removeEventListener('click',handler);


답변

설명이 필요한 removeEventListener () 문제가 발생했습니다.

이벤트 리스너에 매개 변수를 전달할 수 있기를 원했기 때문에 이벤트 리스너를 생성하는 함수를 작성했습니다. 그러면 의도 한 이벤트 리스너를 콜백으로 호출하는 두 번째 함수가 반환됩니다.

전체 라이브러리 파일은 다음과 같습니다.

//Event handler constants

function EventHandlerConstants()
{
this.SUCCESS = 0;   //Signals success of an event handler function
this.NOTFUNCTION = 1;   //actualHandler argument passed to MakeEventHandler() is not a Function object

//End constructor
}

//MakeEventHandler()

//Arguments:

//actualHandler : reference to the actual function to be called as the true event handler

//selfObject    : reference to whatever object is intended to be referenced via the "this" keyword within
//          the true event handler. Set to NULL if no such object is needed by your true
//          event handler specified in the actualHandler argument above.

//args      : array containing the arguments to be passed to the true event handler, so that the true
//          event handler can be written with named arguments, such as:

//          myEventHandler(event, arg1, arg2, ... )

//          If your function doesn't need any arguments, pass an empty array, namely [], as the
//          value of this argument.

//Usage:

//c = new EventHandlerConstants();
//res = MakeEventHandler(actualHandler, selfObject, args);
//if (res == c.SUCCESS)
//  element.addEventListener(eventType, res.actualHandler, true);   //or whatever


function MakeEventHandler(actualHandler, selfObject, args)
{
var c = new EventHandlerConstants();

var funcReturn = null;      //This will contain a reference to the actual function generated and passed back to
                //the caller

var res = {
        "status" : c.SUCCESS,
        "actualHandler" : null
        };

if (IsGenuineObject(actualHandler, Function))
{
    res.actualHandler = function(event) {

        var trueArgs = [event].concat(args);

        actualHandler.apply(selfObject, trueArgs);

    };

}
else
{
    res.status = c.NOTFUNCTION;

//End if/else
}

//Return our result object with appropriate properties set ...

return(res);

//End function
}

그런 다음 이것이 의도 한대로 작동하는지 알아보기 위해 빠른 테스트 페이지를 작성하고 원하는대로 이벤트 처리기를 추가하고 제거 할 수 있도록했습니다.

HTML 테스트 페이지는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>

<!-- CSS goes here -->

<link rel="stylesheet" type="text/css" href="NewEventTest.css">

<!-- Required JavaScript library files -->

<script language = "JavaScript" src="BasicSupport.js"></script>
<script language = "JavaScript" src="EventHandler6.js"></script>

</head>

<body class="StdC" id="MainApplication">

<button type="button" class="StdC NoSwipe" id="Button1">Try Me Out</button>

<button type="button" class="StdC NoSwipe" id="Button2">Alter The 1st Button</button>

</body>

<script language = "JavaScript" src="NewEventTest.js"></script>

</html>

완전성을 위해 다음과 같은 간단한 CSS 파일도 사용합니다.

/* NewEventTest.css */


/* Define standard display settings classes for a range of HTML elements */

.StdC {

color: rgba(255, 255, 255, 1);
background-color: rgba(0, 128, 0, 1);
font-family: "Book Antiqua", "Times New Roman", "Times", serif;
font-size: 100%;
font-weight: normal;
text-align: center;

}


.NoSwipe {

user-select: none;  /* Stops text from being selectable! */

}

테스트 코드는 다음과 같습니다.

//NewEventTest.js


function GlobalVariables()
{
this.TmpRef1 = null;
this.TmpRef2 = null;
this.TmpRef3 = null;

this.Const1 = null;

this.Handler1 = null;
this.Handler2 = null;
this.Handler3 = null;

this.EventOptions = {"passive" : true, "capture" : true };

//End constructor
}


//Button 1 Initial function

function Button1Initial(event)
{
console.log("Button 1 initial event handler triggered");

//End event handler
}


function Button1Final(event)
{
console.log("Button 1 final event handler triggered");

//End event handler
}


function Button2Handler(event, oldFunc, newFunc)
{
var funcRef = null;

this.removeEventListener("click", oldFunc);
this.addEventListener("click", newFunc, GLOBALS.EventOptions);

//End event handler
}


//Application Setup

GLOBALS = new GlobalVariables();

GLOBALS.Const1 = new EventHandlerConstants();

GLOBALS.TmpRef1 = document.getElementById("Button1");
GLOBALS.TmpRef2 = MakeEventHandler(Button1Initial, null, []);
if (GLOBALS.TmpRef2.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler1 = GLOBALS.TmpRef2.actualHandler;
    GLOBALS.TmpRef1.addEventListener("click", GLOBALS.Handler1, GLOBALS.EventOptions);

//End if
}

GLOBALS.TmpRef1 = MakeEventHandler(Button1Final, null, []);
if (GLOBALS.TmpRef1.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler3 = GLOBALS.TmpRef1.actualHandler;

//End if
}


GLOBALS.TmpRef1 = document.getElementById("Button2");
GLOBALS.TmpRef2 = document.getElementById("Button1");
GLOBALS.TmpRef3 = Button1Final;
GLOBALS.TmpRef4 = MakeEventHandler(Button2Handler, GLOBALS.TmpRef2, [GLOBALS.Handler1, GLOBALS.Handler3]);
if (GLOBALS.TmpRef4.status == GLOBALS.Const1.SUCCESS)
{
    GLOBALS.Handler2 = GLOBALS.TmpRef4.actualHandler;
    GLOBALS.TmpRef1.addEventListener("click", GLOBALS.Handler2, GLOBALS.EventOptions);

//End if
}

따라서 수행 할 테스트는 다음과 같습니다.

[1] 클릭 이벤트 핸들러를 버튼 # 1에 연결합니다.

[2] 버튼을 클릭 할 때 이벤트 핸들러가 호출되는지 테스트합니다.

[3] 테스트가 통과되면 Button # 2를 클릭하고 그에 연결된 이벤트 핸들러를 호출합니다. 그러면 Button # 1에 연결된 이전 이벤트 핸들러가 제거되고 새 이벤트 핸들러로 대체됩니다.

단계 [1] 및 [2]는 정상적으로 작동합니다. 이벤트 핸들러가 첨부되고 버튼을 클릭 할 때마다 호출됩니다.

문제는 단계 [3]에 있습니다.

특히 단계 [3]에서 해당 이벤트 리스너를 제거하기 위해 MakeEventHandler ()에 의해 생성 된 함수에 대한 참조를 저장하더라도 removeEventListener ()를 호출해도 이벤트 리스너가 제거되지 않습니다. 이후에 Button # 1을 클릭하면 내가 제거한 것으로 추정되는 것을 포함하여 두 이벤트 리스너가 모두 실행됩니다!

말할 필요도없이이 동작은 모든 것을 신중하게 설정 했음에도 불구하고 내가 removeEventListener () 호출에서 지정한 함수가 처음에 addEventListener ()로 추가 한 자체 동일한 함수가되도록 설정 했음에도 불구하고 당황스러워 합니다. 주제에 대한 모든 문서에 따르면 ‘각 호출에 대해 동일한 기능에 대한 참조를 전달 (이 스레드 포함) 읽었 해야 작동하지만 명확하지 않습니다.

단계 [1]에서 예상대로 콘솔의 테스트 출력은 다음과 같습니다.

버튼 1 초기 이벤트 핸들러가 트리거 됨

코드는 예상대로 [2] 단계에서 실행되며 코드를 단계별로 추적하면 실제로 코드가 예상대로 실행됨을 알 수 있습니다.

그러나 단계 [3] 에서 버튼 # 1을 처음 클릭하면 원하는 결과를 얻을 수 있습니다.

버튼 1 최종 이벤트 핸들러가 트리거 됨

무슨 일이 버튼 # 1에 클릭 할 때 발생 이후 이 있습니다 :

버튼 1 초기 이벤트 핸들러가 트리거 됨 버튼 1 최종 이벤트 핸들러가 트리거 됨

확실히, 처음에 Button # 1에 연결된 함수가 클로저 내에서 생성 되었기 때문에 여전히 메모리에 유지 되더라도 요소에 대한 이벤트 리스너 컬렉션에서 분리되어야합니까? 왜 여전히 연결되어 있습니까?

또는 이벤트 리스너와 함께 클로저를 사용하는 것과 관련된 이상한 버그가 발생 했습니까?