JS 브 라 우 저 이벤트 모델 상세 설명

사건 이란 무엇 인가
나 는 네가 사건 의 구동 을 들 어 본 적 이 있 을 것 이 라 고 생각한다.그러나 사건 의 구동 은 도대체 무엇 입 니까?왜 브 라 우 저 는 이벤트 구동 이 라 고 말 합 니까?
사건 의 구동 은 통속 적 으로 말 하면 모든 것 이 사건 으로 추상 화 되 는 것 이다.

번 의 클릭 은 하나의 사건 입 니 다.

.

키보드 누 르 는 건 이벤트

입 니 다.

네트워크 요청 성공 은 하나의 사건

페이지 로 딩 은 이벤트

입 니 다.

페이지 오류 보고 사건

브 라 우 저 는 이벤트 에 의 해 앱 이 실행 되 고 이벤트 구동 이 없 으 면 앱 이 처음부터 끝까지 바로 실행 되 고 종료 되 며 이벤트 구동 은 브 라 우 저의 초석 이다.
간단 한 예
사실 현실 에서 의 신호등 은 일종 의 사건 으로 우리 에 게 지금 이 빨 간 신호등 상태 인지,녹색 신호등 상태 인지,노 란 신호등 상태 인지 알려 준다.우 리 는 이 사건 에 따라 스스로 조작 을 완성 해 야 한다.예 를 들 어 빨 간 신호등 과 노 란 신호등 등 우 리 는 기 다 려 야 한다.녹색 신호등 은 우 리 는 길 을 건 널 수 있다.
다음은 가장 간단 한 브 라 우 저 엔 드 의 이 벤트 를 살 펴 보 겠 습 니 다.
html 코드:

<button>Change color</button>

js 코드:

var btn = document.querySelector('button');

btn.onclick = function() {
  console.log('button clicked')
}

코드 는 매우 간단 합 니 다.우 리 는 button 에 이 벤트 를 등 록 했 습 니 다.이 이벤트 의 handler 는 우리 가 정의 하 는 익명 함수 입 니 다.사용자 가 이 이벤트 가 등 록 된 button 을 클릭 하면 우리 가 정의 한 익명 함수 가 실 행 됩 니 다.
이벤트 바 인 딩 방법
저 희 는 세 가지 방법 으로 이 벤트 를 연결 할 수 있 습 니 다.각각 줄 내 바 인 딩,직접 할당,addEventListener 를 사용 합 니 다.
내 연 이라는 방법 은 매우 추천 하지 않 는 다.
html 코드:

<button onclick="handleClick()">Press me</button>

그리고 script 태그 에 다음 과 같이 쓰 십시오:

function handleClick() {
  console.log('button clicked')
}

직접 할당
내 가 위 에서 든 예 와 같다.

var btn = document.querySelector('button');

btn.onclick = function() {
  console.log('button clicked')
}

이런 방법 은 두 가지 결점 이 있다.
같은 종류의 handler 를 여러 개 추가 할 수 없습니다.

btn.onclick = functionA;
btn.onclick = functionB;

이렇게 하면 functionB 만 유효 합 니 다.이것 은 addEventListener 를 통 해 해결 할 수 있 습 니 다.
어느 단계 에서 실행 할 지 제어 할 수 없습니다.이것 은 뒤에서 사건 을 포착/거품 이 생 겼 을 때 말 합 니 다.이것 역시 addEventListener 를 통 해 해결 할 수 있 습 니 다.
그래서 addEventListener 가 하늘 을 찌 를 듯 이 태 어 난 것 도 현재 추천 하 는 표기 법 이다.
addEventListener
이전 버 전의 addEventListener 세 번 째 매개 변 수 는 bool 이 고 새 버 전의 세 번 째 매개 변 수 는 대상 입 니 다.이렇게 하면 편리 한 확장 과 더 많은 기능 을 탑재 할 수 있 습 니 다.우 리 는 이 를 중점적으로 소개 합 니 다.
addEventListener 는 Element,Document,Window,심지어 XML HttpRequest 등 바 인 딩 사건 을 줄 수 있 습 니 다.지정 한 사건 이 발생 하면 바 인 딩 된 리 셋 함수 가 특정한 메커니즘 으로 실 행 됩 니 다.이 메커니즘 은 잠시 후에 말씀 드 리 겠 습 니 다.
문법:

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
target.addEventListener(type, listener[, useCapture, wantsUntrusted  ]); // Gecko/Mozilla only

type 은 연결 하고 싶 은 이벤트 형식 입 니 다.흔히 볼 수 있 는 click,scroll,touch,mouseover 등 이 있 습 니 다.이전 버 전의 세 번 째 인 자 는 bool 입 니 다.캡 처 단계 인지 여 부 를 표시 합 니 다.기본 값 은 false 입 니 다.기본 값 은 거품 단계 입 니 다.새 버 전 은 capture(위의 기능 과 마찬가지),passive,once 가 있 는 대상 입 니 다.once 는 한 번 만 실행 할 지 여부 입 니 다.passive 가 true 로 지정 되면 preventDefault()를 영원히 실행 하지 않 겠 다 는 뜻 입 니 다.이것 은 부 드 럽 고 부 드 러 운 스크롤 효 과 를 실현 하 는 데 중요 합 니 다.수 동 리 스 너 로 스크롤 성능 향상
프레임 의 이벤트
실제로 우 리 는 현재 대부분 프레임 워 크 로 코드 를 쓰 고 있 기 때문에 위의 상황 은 현실 에서 매우 보기 드물다.우 리 는 프레임 워 크 가 포 장 된 사건,예 를 들 어 react 의 합성 사건 등 을 더 많이 볼 수 있다.관심 이 있 는 것 은 이 몇 편의 글 을 볼 수 있다.

React SyntheticEvent

Vue 와 React 의 장점 은 각각 무엇 입 니까?둘 의 가장 핵심 적 인 차 이 는 무엇 입 니까?

비록 우 리 는 원생 의 사건 을 접 할 때 가 드 물 지만 사건 대상,사건 체제,사건 대리 등 을 알 아 보 는 것 이 필요 하 다.왜냐하면 구조의 사건 시스템 은 적어도 이 방면 에서 일치 하기 때문이다.이런 내용 은 우리 가 다음 에 말 할 것 이다.
이벤트 개체
모든 이벤트 처리 함 수 는 브 라 우 저 에서 실 행 될 때 이벤트 대상 을 가 져 옵 니 다.예 를 들 어:

function handleClick(e) {
  console.log(e);
}  

btn.addEventListener('click', handleClick);

이 e 가 바로 이벤트 대상,즉 이벤트 object 입 니 다.이 대상 은 매우 유용 한 속성 과 방법 이 있 는데,아래 에 자주 사용 하 는 속성 과 방법 을 몇 개 들 겠 습 니 다.
속성

target

x,y 등 위치 정보

timeStamp

eventPhase

방법.

preventDefault 는 브 라 우 저의 기본 행동 을 막 는 데 사 용 됩 니 다.예 를 들 어 a 탭 은 기본적으로 이동 합 니 다.form 은 기본적으로 action 이 지정 한 주소 등

에 보 냅 니 다.

stop Propagation 은 사건 의 지속 적 인 거품 행 위 를 막 는 데 사용 되 며,나중에 사건 의 전 파 를 말 할 때 언급 된다.

사건 전파
앞에서 말 했 듯 이 이 벤트 는 기본적으로 거품 단계 로 연결 되 어 있 습 니 다.useCapture 를 true 로 표시 하면 포획 단계 로 연 결 됩 니 다.
사건 포착 이 재 미 있 기 때문에 저 는 사건 의 제목 에 사건 전파 체 제 를 추가 하여 후보 에 게 대답 하 게 하 는 것 이 한 사람의 수준 을 잘 나 타 낼 수 있 습 니 다.사건 의 전파 체 제 를 이해 하 는 것 은 특정한 문제 에 매우 큰 역할 을 한다.
하나의 Element 에 연 결 된 이벤트 가 촉발 되 었 습 니 다.그러면 사실은 세 단 계 를 거 칩 니 다.
첫 번 째 단계.-포획 단계.
맨 바깥쪽 즉 HTML 탭 부터 현재 요소 가 캡 처 단계 에 해당 하 는 이벤트 에 연결 되 어 있 는 지 확인 하고 있 으 면 실행 되 고 없 으 면 계속 안 으로 전 파 됩 니 다.이 과정 은 이 사건 을 촉발 하 는 요소 에 도달 할 때 까지 재 귀적 으로 실 행 됩 니 다.
의사 코드:

function capture(e, currentElement) {
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => fn(e))
    }


    // pass down
    if (currentElement !== e.target) {
        // getActiveChild                 
        capture(e, getActiveChild(currentElement, e))
    } else {
        bubble(e, currentElement)
    }
}

//   Event       
capture(new Event(), document.querySelector('html'))

두 번 째 단계.-목표 단계.
위 에서 이미 언급 하 였 으 니,여 기 는 생략 하 였 다.
세 번 째 단계.-거품 단계.
이 사건 을 촉발 하 는 요소 부터 현재 요소 가 거품 단계 에 대응 하 는 이벤트 에 연결 되 어 있 는 지 확인 하고 있 으 면 실행 되 고 없 으 면 계속 안 으로 전 파 됩 니 다.이 과정 은 HTML 에 닿 을 때 까지 재 귀적 으로 실 행 됩 니 다.
의사 코드:

function bubble(e, currentElement) {
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => fn(e))
    }
    // returning
    if (currentElement !== document.querySelector('html')) {
        bubble(e, currentElement.parent)
    }
}

상술 한 과정 은 그림 으로 표시 한다.

만약 당신 이 사건 이 계속 거품 을 일 으 키 기 를 원 하지 않 는 다 면,이전에 내 가 언급 한 stop Propagation 을 사용 할 수 있 습 니 다.
의사 코드:

function bubble(e, currentElement) {
    let stopped = false;
    function cb() {
        stopped = true;
    }
    if (currentElement.listners[e.type] !== void 0) {
        currentElement.listners[e.type].forEach(fn => {
            fn({
                ...e,
                stopPropagation: cb
            });
            if (stopped) return;
        })
    }
    // returning
    if (currentElement !== document.querySelector('html')) {
        bubble(e, currentElement.parent)
    }
}

이벤트 에이전트
위 에서 언급 한 사건 의 거품 메커니즘 을 이용 하여 우 리 는 재 미 있 는 것 을 선택 할 수 있다.예 를 들 어:
다음 목록 이 있 습 니 다.해당 목록 항목 을 클릭 할 때 출력 은 어떤 요 소 를 클릭 하 였 습 니까?
HTML 코드:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JS 코드:

document.querySelector('ul').addEventListener('click', e => console.log(e.target.innerHTML))

온라인 주 소 는 addEventListener 가 기본적으로 거품 단계 로 연결 되 기 때문에 이 벤트 는 목표 단계 에서 시작 하여 외부 로 거품 이 발생 합 니 다.우리 가 이 벤트 를 연결 한 l 에 이 르 기 까지 ul 에서 이벤트 대상 의 target 속성 을 통 해 어떤 요소 가 촉발 되 었 는 지 얻 을 수 있 습 니 다.
"사건 은 목표 단계 에서 시 작 됩 니 다."사건 이 포획 단계 가 없다 는 것 이 아니 라 우리 가 포획 단 계 를 연결 하지 않 았 다 는 것 입 니 다.저 는 생략 했 습 니 다.
우 리 는 외부 에 있 는 얼 에 게 만 이벤트 처리 함 수 를 연결 하 였 으 나,li 를 클릭 할 때 실제 적 으로 li 에 대응 하 는 내용(1,2,3 또는 4)을 인쇄 하 는 것 을 볼 수 있 습 니 다.우 리 는 모든 li 바 인 딩 이벤트 처리 함 수 를 줄 필요 가 없습니다.코드 양 뿐만 아니 라 성능 도 어느 정도 향상 되 었 습 니 다.
이 재 미 있 는 물건 을 우 리 는 그것 에 게 듣 기 좋 은 이름 인'사건 대리'를 주 었 다.실제 업무 에서 우 리 는 이 기 교 를 자주 사용 하 는데 이것 은 면접 의 고주파 시험 점 이기 도 하 다.
총결산
이 벤트 는 브 라 우 저 특유 의 것 이 아니 라 JS 언어 와 도 아무런 관계 가 없습니다.이것 도 제 가 왜 JS 부분 으로 나 누 지 않 았 는 지 이유 입 니 다.많은 곳 에 사건 시스템 이 있 지만 각종 사건 모델 은 일치 하지 않 는 다.
오늘 우리 가 말 하 는 것 은 브 라 우 저의 이벤트 모델 입 니 다.브 라 우 저 는 이벤트 구동 을 바탕 으로 많은 것 을 이벤트 로 추상 화 합 니 다.예 를 들 어 사용자 의 상호작용,네트워크 요청,페이지 로드,오류 보고 등 이 있 습 니 다.이 벤트 는 브 라 우 저의 정상 적 인 운행 의 초석 이 라 고 할 수 있 습 니 다.
우리 가 사용 하 는 프레임 워 크 는 모두 사건 에 대해 어느 정도 의 포장 과 처 리 를 했다.원생 의 사건 과 원 리 를 이해 하 는 것 외 에 가끔 은 프레임 자체 가 사건 에 대한 처 리 를 이해 하 는 것 도 필요 하 다.
이벤트 가 발생 했 을 때 브 라 우 저 는 이벤트 대상 을 초기 화하 고 이 이벤트 대상 을 일정한 논리 에 따라 전파 합 니 다.이 논 리 는 바로 이벤트 전파 체제 입 니 다.우 리 는 사건 전 파 는 사실 세 단계 로 나 뉘 는데 시간의 선후 순서에 따라 포획 단계,목표 단계 와 거품 단계 로 나 뉜 다 고 언급 했다.개발 자 는 서로 다른 단 계 를 감청 하여 원 하 는 효 과 를 얻 을 수 있 습 니 다.
이벤트 대상 은 많은 속성 과 방법 이 있 습 니 다.이벤트 처리 함수 에서 읽 기와 조작 을 할 수 있 습 니 다.예 를 들 어 클릭 한 좌표 정 보 를 읽 고 거품 을 막 는 등 입 니 다.
마지막 으로 우 리 는 하나의 예 를 통 해 거품 메커니즘 을 어떻게 이용 하여 사건 대 리 를 실현 하 는 지 설명 했다.
이상 은 JS 브 라 우 저 이벤트 모델 에 대한 상세 한 내용 입 니 다.JS 브 라 우 저 이벤트 모델 에 대한 자 료 는 다른 관련 글 을 주목 하 십시오!