버튼을 만들고 클릭 핸들러를 첨부 한 경우 :
let btn = document.createElement("button");
btn.innerHTML = "Do Something";
btn.onclick = () => { doSomething(); };
document.body.appendChild(btn);
나중에 다른 용도로 단추를 다시 사용하고 싶습니다. 이벤트 처리기를 재정의하는 안전한 방법입니까?
btn.innerHTML = "Do Something Else";
btn.onclick = () => { doSomethingElse(); }
btn.onclick = null;새 핸들러를 연결하기 전에 설정 한 몇 가지 예를 보았습니다 . 또한 addEventListener()/ removeEventListener(). 이 방법들 사이에 차이점이 있습니까? 이 중 하나로 메모리 누수를 일으킬 수 있습니까?
주어진 객체의 동일한 이벤트에 대해 여러 핸들러를 설치할 수 있도록하려면 객체 addEventListener()의 주어진 이벤트에 대한 핸들러 목록을 관리하는 메서드를 호출 할 수 있습니다 . 그런 다음 해당 removeEventListener()함수 를 호출하여 개체에서 처리기를 제거 할 수 있습니다 .
이전 이벤트 핸들러를 제거한 후 event동일한 요소에 새 핸들러를 다시 연결할 수 있습니다 . 이렇게하면 메모리 누수가 발생하지 않습니다.
코드 데모 :
let btn = document.createElement("button");
btn.innerHTML = "Do Something";
element.addEventListener("click", doSomething, true)
document.body.appendChild(btn);
...
btn.removeEventListener("click", doSomething, true);
// 세 번째 인수는 이전 경우와 동일해야합니다. 이 경우 true입니다.
btn.addEventListener("click",doSomethingThingElse};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다