js의 addEventListener() 및 RemoveEventListener() 분석

이 글에서는 이벤트 핸들러를 지정하고 삭제하는 작업을 처리하는 addEventListener()와 RemoveEventListener()를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

addEventListener () 및 RemoveEventListener()는 이벤트 핸들러 작업 지정 및 제거를 처리하는 데 사용됩니다.
모든 DOM 노드에는 이 두 가지 메소드가 포함되어 있으며 둘 다 3개의 매개변수(처리할 이벤트 이름, 이벤트 핸들러 기능, 부울 값)를 허용합니다.

마지막 부울 매개변수는 true입니다. 이는 이벤트 핸들러가 캡처 단계에서 호출된다는 의미입니다.
false(false-기본값)인 경우 이벤트 핸들러가 캡처 단계에서 호출된다는 의미입니다. 버블링 단계.

addEventListener에는 총 3개의 매개변수가 있습니다. 구문은 다음과 같습니다.
element.addEventListener(type, listening, useCapture)

다음은 자세한 내용입니다. 설명:
1. 요소는 함수가 바인딩되는 개체입니다.
2. 유형은 이벤트 이름입니다. "onclick"은 "click"으로 변경되어야 하며 "onblur"는 "blur"로 변경되어야 합니다. 즉, 이벤트 이름에 "on"이 포함되어서는 안 됩니다. .
3. 리스너는 물론 바인딩된 함수입니다. 괄호를 따르지 마세요.
4. 마지막 매개변수는 이벤트의 응답 순서를 나타내는 부울 값입니다( 캡쳐를 사용하세요).

버튼 클릭 이벤트에 대한 이벤트 핸들러를 추가하려면 다음 코드를 사용할 수 있습니다.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert(this.id);
}, false);

DOM2 레벨 접근 방식을 사용하여 이벤트 핸들러를 추가할 때의 주요 이점 가능합니다. 여러 이벤트 핸들러를 추가합니다. 다음 예를 보십시오.

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert(this.id);
}, false);  
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

addEventListener()를 통해 추가된 이벤트 핸들러는 제거 시

을 통해서만 제거할 수 있습니다. 핸들러를 추가할 때 사용한 것과 동일합니다.
이는 다음 예와 같이 addEventListener()를 통해 추가된 익명 함수는 제거할 수 없음을 의미합니다.

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
   alert(this.id);
}, false);

예제에서는 addEventListener()를 사용하여 이벤트 핸들러를 추가했습니다.
removeEventListener를 호출하면 동일한 매개변수를 사용하는 것처럼 보이지만
사실 두 번째 매개변수는 addEventListener()에 전달된 매개변수와 전혀 다른 함수입니다.
removeEventListener()에 전달된 이벤트 핸들러 함수는 addEventListener()에 전달된 이벤트 핸들러 함수와 동일해야 합니다.

다음 예와 같이:

var btn = document.getElementById("myBtn");
var handler = function () {
   alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！

addEventListener()와 RemoveEventListener()에 동일한 함수가 사용되므로 다시 작성된 이 예제에는 문제가 없습니다.
실험 결과 사용자가 버튼을 클릭할 때마다 "I have been clicked!"라는 메시지가 출력되어 RemoveEventListener() 함수가 작동하지 않음을 나타냅니다.

정보를 검색하여 결론을 도출합니다. RemoveEventListener() 함수를 사용할 때 핸들러 함수는 addEventListener()의 핸들러 함수와 동일해야 합니다.

그래서 위에 작성한 코드는 잘못된 것입니다. 수정된 코드는 다음과 같아야 합니다.

//addEventListener()和removeEventListener()中handler函数必须相同，移除事件函数才有效。
function myhandler(){
  console.log("I have been clicked!");
  document.getElementById('info').removeEventListener('click',myhandler,false);
}
var target=document.getElementById('info');
target.addEventListener("click", myhandler, false);
target.removeEventListener("click", myhandler, false); //有效！

js를 배워야 하는 학생은 php 중국어 웹사이트 js 비디오 자습서를 주목하세요. 많은 js 온라인 비디오 튜토리얼은 무료입니다. 시청하세요!

위 내용은 js의 addEventListener() 및 RemoveEventListener() 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!