js 귀속 이벤트 화해 귀속 이벤트 방법

이벤트 바 인 딩 방법

원소 함수

사용자 정의 함수

//  1
function myAlert(){
alert("  ");
}

요소. on 이벤트 = function () {/ 이벤트 처리 함수 코드}

document.getElementById("demo").onclick=function(){
alert(“  ”); 
}

이러한 방식 은 자 바스 크 립 트 코드 에 이 벤트 를 연결 하여 자 바스 크 립 트 코드 와 HTML 라벨 을 분리 시 키 고 문서 의 구조 가 뚜렷 하 며 관리 와 개발 에 편리 합 니 다.다른 사람 이 추가 한 클릭 이벤트 로 덮어 쓸 수 있 습 니 다.4. 바 인 딩 이벤트 감청 함수 addEventListener (attachEvent) (1) 도입: 요소 바 인 딩 이벤트 에 직접 연결 하면 이 요소 의 마지막 처리 함수 가 이전 함 수 를 덮어 씁 니 다.다음: 3333 만 출력 하고 앞의 처리 함수 가 실행 되 지 않 습 니 다.

  
  


    

  var btn = document.getElementById("btn");
  btn.onclick=function () {
    console.log("1111");
  };
  btn.onclick=function () {
    console.log("2222");
  };
  btn.onclick=function () {
    console.log("3333");
  };

(2) 해결 방법: addEventListener (attachEvent) 1 대상. addEventListener ("이벤트 유형", 이벤트 처리 함수, false);구 글 과 화 호 는 IE8 이 지원 하지 않 고 마지막 매개 변 수 는 클릭 이벤트 가 발생 할 때 거품 이 발생 하 는 단 계 를 제어 하 는 것 입 니까? 아니면 캡 처 단계 입 니까?2 대상. attachEvent ("on 이 있 는 이벤트 유형", 이벤트 처리 함수) – 구 글 은 지원 하지 않 습 니 다. 화 호 는 지원 하지 않 습 니 다. IE8 지원 합 니 다.

  
  


    

  var btn = document.getElementById("btn");
  btn.addEventListener("click",function () {
    console.log("1111");
  },false);
  btn.addEventListener("click",function () {
    console.log("2222");
  },false);
  btn.addEventListener("click",function () {
    console.log("3333");
  },false);

결과: 1111, 2222, 3333 모두 출력
(4) 호 환 코드

  //     .       ,      ,     ,      
  function addEventListener(element,type,fn) {
    if(element.addEventListener){
      element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
      element.attachEvent("on"+type,fn);
    }else{
      element["on"+type]=fn;
    }
  }

(5) addEventListener 와 attachEvent 의 차이 (1) 방법 명 이 다르다 (2) 매개 변수 개수 가 다르다 addEventListener 세 개의 매개 변수, attachEvent 두 개의 매개 변수 (3) addEventListener 구 글, 불 여우, IE 11 지원, IE8 지원 하지 않 음, attachEvent 구 글 불 여우 지원 하지 않 음, IE 11 지원 하지 않 음, IE8 지원 (4) this 다르다.addEventListener 의 this 는 현재 바 인 딩 이벤트 의 대상 입 니 다. attachEvent 의 this 는 window (5) addEventListener 의 이벤트 형식 (이벤트 이름) 은 on 이 없고 attachEvent 의 이벤트 형식 (이벤트 이름) 은 on 이 있 습 니 다.
사건 을 푸 는 방법

대상. on 이벤트 이름 = null

 
 






 document.getElementById("btn").onclick=function () {
   alert("111");
 };
 document.getElementById("btn2").onclick=function () {
   //1.    
   document.getElementById("btn").onclick=null;
 };

대상. removeEventListener ("on 이 없 는 이벤트 형식", 함수 이름, false)

대상. removeEventListener ("on 이 없 는 이벤트 형식", 함수 이름, false);(화 호 · 구 글)

대상. detachEvent ("on 이벤트 유형", 함수 이름);（IE）

주의: 묶 인 이 벤트 는 이름 함수

여야 합 니 다.

  
  





  function f1() {
    alert("111");
  }
  document.getElementById("btn").addEventListener("click",f1,false);
  //                       
  document.getElementById("btn2").onclick=function () {
    //       ,          ,      
    document.getElementById("btn").removeEventListener("click",f1,false);
  };

호 환 함수

function removeEventListener(element,type,fnName) {
    if(element.removeEventListener){
      element.removeEventListener(type,fnName,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,fnName);
    }else{
      element["on"+type]=null;
    }
  }

ps: 어떤 방식 으로 사건 을 귀속 시 키 면 대응 하 는 방식 으로 사건 을 풀 어야 합 니까