40장 이벤트 (모던 자바스크립트 Deep Dive)

 

모던 자바스크립트 Deep Dive 글 목록(스터디)
https://hello-kk.tistory.com/780

---

● 이벤트 핸들러: 이벤트 발생 시, 브라우저에 의해 호출될 함수

이벤트 핸들러는

(1) 이벤트 타깃에 바인딩

(2) 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩

 

● 발생한 이벤트는 객체!

(1) 이벤트 핸들러의 첫 번째 인수로 전달

(2) 매개변수 e, 명시적으로 선언 필수!

 

● 이벤트 전파

DOM트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.

 

● 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로, DOM 트리를 통해 전파

(1) 캡쳐링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

(2) 타깃 단계: 이벤트가 이벤트 타깃에 도달

(3) 버블링: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

 

○ 처음에 이해하지 못한 부분: 왜 상위 요소에서 시작하지?

 => 이벤트 객체가 window에서 만들어져서 DOM 트리를 타고 내려가기 때문

 

● (예제)

(1) ul 요소[event.currentTarget]에 이벤트 핸들러 바인딩

(2) (ul 요소의 하위 요소인) li 요소[event.target]를 클릭하여 이벤트 발생

 

● (이벤트 클릭에 대한 과정)

(1) li 요소 클릭, 클릭 이벤트 발생

(2) 클릭 이벤트 객체 생성

(3) 클릭된 li 요소 == 이벤트 타깃

(4) 클릭 이벤트 객체는 window에서 시작해서 이벤트 타깃 방향으로 전파 => [캡쳐링 단계]

(5) 이벤트 객체가 이벤트를 발생시킨 이벤트 타깃에 도달 => [타깃 단계]

(6) 이벤트 객체는 이벤트 타깃에서 시작해서 window 방향으로 전파 => [버블링 단계]

 

○ 버블링, 캡처링, 타깃 단계의 이벤트를 캐치한다는 것의 의미?

 

● 버블링을 통해 전파되지 않는 이벤트 (버블링이 필요 없는 이유?)

포커스 이벤트, 리소스 이벤트, 마우스 이벤트

 

● 캡처링 - 타깃 - 버블링 과정

body - p - button의 경우

button을 클릭하면 p의 이벤트 핸들러가 호출(캡쳐링 단계에서 호출됨) // 내가 여기서 혼동한 점은, body는 왜 호출되지 않는가? 였는데, addEventListener에서 인자를 생략하면 버블링 단계에서만 호출된다. 따라서 캡쳐링 단계에서는 호출되지 않았던 것이었음)

버블링 단계의 이벤트를 캐치하는 body 요소의 이벤트 핸들러가 순차적으로 호출

 

○ p에서 클릭 이벤트 발생시, 캡처링 단계에서 p 이벤트 핸들러 호출, 버블링 단계에서 body 이벤트 핸들러 호출. => 타깃은 호출되지 않는건가.. p ?

 

● 이벤트 위임

여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신,

하나의 상위 DOM 요소에 이벤트 해들러를 등록하는 방법

 * 동적으로 DOM 요소를 추가하더라도 따로 등록하지 않아도 된다!

 * 주의사항: 이벤트를 발생시킨 DOM 요소가 그 DOM 요소가 아닐 수 있다! => 이벤트 타깃을 검사해야 한다.

 * currentTarget 프로퍼티(이벤트 위임받은 상위 요소) ↔ 이벤트 객체의 target 프로퍼티(실제로 이벤트를 발생시킨 DOM 요소)

 

● DOM 요소의 기본 동작 중단

preventDefault

(예시) 체크박스 클릭시 체크 표시/해제를 하지 않는다

 

● 이벤트 전파 방지

stopPropagation

상위 DOM 요소에 이벤트 위임시, 하위 DOM 요소에서 버블링을 차단(이벤트 전파 방지)하여 하위 DOM 요소에 개별적으로 이벤트를 처리하도록 함

 

 

---

40장 이벤트

 

40.1 이벤트 드리븐 프로그래밍

40.2 이벤트 타입

(1) 마우스 이벤트

(2) 키보드 이벤트

(3) 포커스 이벤트

(4) 폼 이벤트

(5) 값 변경 이벤트

(6) DOM 뮤테이션 이벤트

(7) 뷰 이벤트

(8) 리소스 이벤트

 

40.3 이벤트 핸들러 등록

이벤트 핸들러: 이벤트 발생 시, 브라우저에 의해 호출될 함수

 

이벤트 핸들러를 등록하는 방법

HTML 요소의 어트리뷰트	함수 호출문(함수 참조) => 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미함 (1) on+이벤트 타입 <button ... onclick="함수()">	핸들러에 인수를 전달하기 위함
	함수 참조 함수 호출문의 평가 결과가 이벤트 핸들러로 등록 (1) 함수를 반환하는 고차 함수 호출문 등록=> 호출가능 (2) 값을 반환하는 함수 호출문 => 호출 불가능
이벤트 핸들러 프로퍼티 방식	이벤트 핸들러 프로퍼티에 함수 바인딩 (1) 이벤트 타깃 (2) on+이벤트 타입 (3) 이벤트 핸들러 $button.onclick = function(){ ... }	이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩 가능 (두번째로 바인딩할 경우, 재할당) HTML과 js 코드 분리
addEventListener 메서드 방식	(1) 이벤트 타깃 (2) on 이벤트 타입 (3) 이벤트 핸들러 EventTarget.addEventListener('eventType', functionName [, useCapture]); false혹은 생략: 버블링 단계에서 이벤트 캐치 true: 캡쳐링 단계에서 이벤트 캐치	하나 이상의 이벤트 핸들러 등록 가능(등록된 순서대로 호출) 단, 참조가 동일한 이벤트 중복 등록시 하나만 등록

40.4 이벤트 핸들러 제거

이벤트 핸들러 프로퍼티 방식	$button.onclick = null;	이벤트 핸들러 프로퍼티에 null 할당
addEventListener 메서드 방식	EventTarget.prototype.removeEventListener()	addEventListener 메서드에 인수로 전달한 등록 이벤트 핸들러와 동일해야 함 => 무명 함수인 경우 불가능  여러번 클릭하더라도, removeEventListener는 단 한번만 호출 가능

$button.addEventListener('click', function foo(){
    $button.removeEventListener('click',foo);
    //혹은
    $button.removeEventListener('click',arguments.callee);
})

40.5 이벤트 객체

"발생한 이벤트는 객체"

이벤트 핸들러의 첫 번째 인수로 전달(매개변수 e): 명시적으로 선언 필수

이벤트 핸들러 어트리뷰트의 경우, 매개변수 이름은 event여야 한다.

=>파싱된 이후 이벤트 핸들러 프로퍼티에 event가 암묵적으로 할당되기 때문

 

40.5.1 이벤트 객체의 상속 구조

40.5.2 이벤트 객체의 공통 프로퍼티

 

순서

(1) 이벤트 발생

(2) Event 타입의 이벤트 객체 생성 

(3) (이벤트 객체의 target 프로퍼티는 이벤트를 발생한 객체를 가리킴)

 즉, DOM 요소인 $checkbox 객체.

(4) 이 객체($checkbox)의 프로퍼티는 현재 체크 상태를 나타냄

 

currentTarget: 이벤트 핸들러가 바인딩 된 DOM 요소를 가리킴

 

40.5.3 마우스 정보 취득

드래그: mousedown, mousemove, mouseup

40.5.4 키보드 정보 취득

 

40.6 이벤트 전파

DOM트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.

 

이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로, DOM 트리를 통해 전파

(1) 캡쳐링: 이벤트가 상위 요소에서 하위 요소 방향으로 전파

(2) 타깃 단계: 이벤트가 이벤트 타깃에 도달

(3) 버블링: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

 

(예제)

(1) ul 요소[event.currentTarget]에 이벤트 핸들러 바인딩

(2) (ul 요소의 하위 요소인) li 요소[event.target]를 클릭하여 이벤트 발생

 

(이벤트 클릭에 대한 과정)

(1) li 요소 클릭, 클릭 이벤트 발생

(2) 클릭 이벤트 객체 생성

(3) 클릭된 li 요소 == 이벤트 타깃

(4) 클릭 이벤트 객체는 window에서 시작해서 이벤트 타깃 방향으로 전파 => [캡쳐링 단계]

(5) 이벤트 객체가 이벤트를 발생시킨 이벤트 타깃에 도달 => [타깃 단계]

(6) 이벤트 객체는 이벤트 타깃에서 시작해서 window 방향으로 전파 => [버블링 단계]

 

이벤트 핸들러 어트리뷰트	타깃 단계, 버블링 단계의 이벤트만 캐치 가능
이벤트 핸들러 프로퍼티	타깃 단계, 버블링 단계의 이벤트만 캐치 가능
addEventListener	타깃 단계, 버블링 단계, 캡처링 단계의 이벤트 캐치 가능

 

40.7 이벤트 위임

여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신,

하나의 상위 DOM 요소에 이벤트 해들러를 등록하는 방법

동적으로 DOM 요소를 추가하더라도 따로 등록하지 않아도 된다.

 

40.8 DOM 요소의 기본 동작 조작

40.8.1 DOM 요소의 기본 동작 중단

preventDefault

 

40.8.2 이벤트 전파 방지

stopPropagation

 

40.9 이벤트 핸들러 내부의 this

40.9.1 이벤트 핸들러 어트리뷰트 방식

40.9.2 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식

이벤트 핸들러 프로퍼티 방식	이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킴(= currentTarget 프로퍼티)
addEventListener 메서드 방식	이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킴(= currentTarget 프로퍼티)

* 화살표 함수로 정의한 경우, 상위 스코프의 this 를 가리킴

 

40.10 이벤트 핸들러에 인수 전달

이벤트 핸들러 어트리뷰트 방식	함수 호출문 사용 가능
이벤트 핸들러 프로퍼티 방식	이벤트 핸들러 내부에서 함수를 호출하면 인수 전달 가능
addEventListener 메서드 방식	이벤트 핸들러 내부에서 함수를 호출하면 인수 전달 가능

40.11 커스텀 이벤트

40.11.1 커스텀 이벤트 생성