JavaScript 이벤트 처리기를 지우거나 제거하는 방법?

JavaScript 이벤트 처리기를 지우거나 제거하는 방법?

---

다음 HTML 조각이 제공됩니다.

<form id="aspnetForm" onsubmit="alert('On Submit Run!'); return true;">

onsubmit 이벤트에 대한 처리기를 제거 / 지우고 jQuery 또는 다른 JavaScript 사용 방식을 사용하여 직접 등록해야합니다.

---

라이브러리없이이를 수행하려면 다음을 수행하십시오.

document.getElementById("aspnetForm").onsubmit = null;

---

jQuery 사용

$('#aspnetForm').unbind('submit');

그런 다음 자신의 것을 추가하십시오.

---

이것을 시도하십시오, 이것은 나를 위해 일하고 있습니다.

$('#aspnetForm').removeAttr('onsubmit').submit(function() {   
    alert("My new submit function justexecuted!"); 
});

참조 이 자세한 내용은.

---

jQuery의 경우 이벤트 핸들러를 .live로 바인딩하는 경우 .die를 사용하여 .live로 바인딩 된 모든 인스턴스의 바인딩을 해제 할 수 있습니다.

---

jQuery의 경우 off()jQuery에서 추가 한 모든 이벤트 핸들러를 제거합니다.

$('#aspnetForm').off();

인수없이 .off ()를 호출하면 요소에 연결된 모든 핸들러가 제거됩니다.

---

이것은 이제 고대의 질문이지만 주요 브라우저가 모두 포기했음을 감안할 때 요소와 하위 요소에서 모든 이벤트 핸들러 EventTarget.getEventListeners()를 제거 하고 HTML 구조 만 유지하는 방법이 있습니다. 단순히 요소를 복제하고 교체합니다.

let e = document.querySelector('selector');
let clone = e.cloneNode(true);
e.replaceWith(clone);

이것은 addEventListener()모든 핸들러 함수를 추적하는 메소드로 프로토 타입을 선점하는 것과 똑같은 해킹 이지만 적어도 DOM이 이미 다른 스크립트의 이벤트와 연결된 후에 사용할 수 있습니다.

이것은 또한 다음 clone()대신 jQuery를 사용하여 위와 거의 동일하게 작동합니다 cloneNode().

let original = $('#my-div');
let clone = original.clone();
original.replaceWith(clone);

이 패턴은 같은 "on"속성 으로 정의되지 않는 한 요소 또는 하위 노드에 이벤트 핸들러를 효과적으로 남기지 않습니다 onclick="foo()".

참조 URL : https://stackoverflow.com/questions/803936/how-to-clear-remove-javascript-event-handler