addEventListener()와 removeEventListener()해석

addEventListener()와 removeEventListener()는 이벤트 처리 프로그램 을 지정 하고 삭제 하 는 데 사 용 됩 니 다.
모든 DOM 노드 에는 이 두 가지 방법 이 포함 되 어 있 으 며,모두 세 개의 인 자 를 받 아들 입 니 다.처리 할 이벤트 이름,이벤트 처리 프로그램의 함수 와 불 값 입 니 다.
마지막 으로 이 불 값 인 자 는 true 로 캡 처 단계 에서 이벤트 처리 프로그램 을 호출 하 는 것 을 표시 합 니 다.
false(false-기본 값)라면 거품 단계 에서 이벤트 처리 프로그램 을 호출 하 는 것 을 의미 합 니 다.
addEventListener 의 인 자 는 모두 세 개 입 니 다.문법 은 다음 과 같 습 니 다.
element.addEventListener(type,listener,useCapture)
다음은 상세 한 설명 입 니 다.
1.그 중에서 element 는 함 수 를 연결 할 대상 입 니 다.
2.type 은 이벤트 이름 입 니 다.주의해 야 할 것 은'onclick'을'click'으로 바 꾸 고'onblur'를'blur'로 바 꾸 는 것 입 니 다.즉,이벤트 이름 에'on'을 가지 고 있 지 말 라 는 것 입 니 다.
3.listener 는 당연히 바 인 딩 된 함수 입 니 다.괄호 를 따 르 지 마 세 요.
4.마지막 매개 변 수 는 불 값 으로 이 사건 의 응답 순 서 를 나타 낸다.다음은 addEventListener 의 세 번 째 매개 변수(useCapture)를 중심 으로 소개 한다.
클릭 이벤트 에 이벤트 처리 프로그램 을 추가 하려 면 다음 코드 를 사용 하 십시오.

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

DOM 2 급 방법 으로 이벤트 처리 프로그램 을 추가 하 는 주요 장점 은 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있다 는 것 이다.다음 의 예 를 보십시오.

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

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

addEventListener()를 통 해 추 가 된 이벤트 처리 프로그램 은 removeEventListener()로 만 제거 할 수 있 습 니 다.
제거 할 때 들 어 오 는 매개 변 수 는 처리 프로그램 을 추가 할 때 사용 하 는 매개 변수 와 같 습 니 다.
이것 은 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()에서 같은 함수 로 사용 되 기 때 문 입 니 다.
실험 결 과 는 사용자 가 button 을 클릭 할 때마다"I have been clicked!"를 출력 한 다 는 것 이다.removeEventListener()함수 가 작용 하지 않 았 음 을 설명 합 니 다. 
자 료 를 찾 아 결론 을 얻다.removeEventListener()함 수 를 사용 할 때 handler 함 수 는 addEventListener()의 handler 함수 와 같 아야 합 니 다.
그래서 위 에 쓰 인 코드 가 틀 렸 습 니 다.수정 후의 코드 는 다음 과 같 아야 합 니 다.

//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); //  ！

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.