js 학습 총화 dom2 급 사건 기초 지식 상세 설명

우리 가 사용 하 는 DOM 2 이벤트 바 인 딩 은 box 가 원형 체인 을 통 해 EventTarget 이라는 내 장 된 원형 에 있 는 addEventListener 방법 을 계속 찾 게 하 는 것 입 니 다.
DOM 0 레벨 이벤트 바 인 딩:한 요소 의 특정한 행위 에 한 번 만 바 인 딩 할 수 있 는 방법 입 니 다.두 번 째 바 인 딩 은 앞의 것 을 덮어 씁 니 다.
DOM 2:특정한 요소 의 같은 행동 에 여러 가지 다른 방법 을 연결 할 수 있 습 니 다.

box.addEventListener('click',function(e){
      console.log(1)
    },false)
    box.addEventListener('click',function(e){
      console.log(2)
    },false) //   1 2

DOM 2:DOM 0 의 행동 유형,우 리 는 DOM 2 와 같이 연결 할 수 있 으 며,DOM 2 에 서 는 DOM 0 에 없 는 행동 유형->DOMContentLoaded:페이지 의 DOM 구조(HTML 구조 로 딩 완료)가 촉발 하 는 행 위 를 제공 합 니 다.

box.addEventListener('DOMContentLoaded',function(e){
      
    },false)

window.onload = function(){}

//              （  、HTML  、   ...）         ；             ，            ；->      DOM0    ，        
    　$(document).ready(function(){})//->$(function(){})
    /*
            HTML               ；               。       DOM2     ，      DOMContentLoaded
    */

DOM 2 급 이벤트 추가 및 제거 세부 사항

function fn1(e){
      console.log(this);
    }
    //    
    box.addEventListener('click',fn1,false);
    //    
    box.removeEventListener('click',fn1,false);

주의:제거 할 때 세 가지 매개 변 수 를 확보 해 야 합 니 다:행위,방법,어느 단계 에서 발생 합 니까?   세 개의 매개 변 수 는 일치 해 야 합 니 다.->DOM 2 가 연결 되 어 있 을 때 우 리 는 보통 그 에 게 실명 함 수 를 연결 합 니 다.
특정한 요소 의 같은 행동 에 만 여러 개의'다른'방법 을 연결 할 수 있 습 니 다.(방법 이 같 으 면 하나만 남 길 수 있 습 니 다)
행위 가 촉발 되면 귀속 의 선후 순서에 따라 귀속 방법 을 순서대로 집행 한다.실 행 된 this 는 현재 바 인 딩 된 이벤트 의 요소 자체 입 니 다.

function fn1(){
      console.log(1);
    }
    //    
    box.addEventListener('click',fn1,false);
    box.addEventListener('click',fn1,false);//     1

위 에서 언급 한 개념:이벤트 풀(현재 요소 행동 바 인 딩 방법 을 저장 하 는 브 라 우 저 자체 의 메커니즘)은 다음 그림 과 같다.

 그러나 IE6-8 브 라 우 저 에 서 는 addEventListener 가 지원 되 지 않 습 니 다.DOM 2 이벤트 연결 을 실현 하려 면 attachEvent/detachEvent 만 사용 할 수 있 습 니 다.
이것 은 두 개의 인자 만 있 습 니 다.addEventListener 처럼 어느 단계 에서 발생 하 는 지 제어 할 수 없습니다.기본적으로 거품 단계 에서 만 발생 할 수 있 습 니 다.동시에 행 위 는 on(DOM 0 과 특별한 유사)을 추가 해 야 합 니 다.

box.attachEvent('onclick',fn1)

메모:표준 브 라 우 저의 이벤트 풀 메커니즘 과 비교:
1.순서 문제:실행 할 때 순서 가 혼 란 스 럽 고 표준 브 라 우 저 는 바 인 딩 순서에 따라 순서대로 실 행 됩 니 다.
2.중복 문제:ie6-8 은 같은 요소 의 같은 행위 에 똑 같은 방법 을 여러 개 연결 할 수 있다.
3.this 문제:ie6-8 에서 방법 이 실 행 될 때 방법 중의 this 는 현재 요소 box 가 아니 라 window 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.