이벤트

• 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수
• 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

1. 이벤트 핸들러 등록

🔵 어트리뷰트 방식

• 이벤트 핸들러 어트리뷰트 이름은 onClick과 같이 on접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음.
• 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록됨.

👾 #1

<button onClick="sayHi('Lee')">Click ME!</button>

🔵 프로퍼티 방식

• 이벤트 핸들러 프로퍼티의 키는 onClick과 같이 on접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음.
• 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러 등록됨.

const $button = document.querySelector('button');

$button.onclick = function(){
	console.log('button click');
};

📍 이벤트 핸들러는 이벤트 티깃 또는 전파된 이벤트를 캐치할 DOM노드 객체에 바인딩함!!!
📍 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있음.

🔵 addEventListener 메서드 방식

• EventTarget.addEventListener(이벤트 타입, 이벤트 핸들러, capture 사용 여부)
• 이벤트 핸들러를 인수로 전달하므로 하나 이상의 이벤트 핸들러 등록 가능.
• 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록.

2. 이벤트 핸들러 제거

• addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드 사용
• 무명 함수를 이벤트 핸들러로 등록한 경우 제거 불가능.
  기명 이벤트 핸들러 내부에서 removeEventListener 메서드 호출 시 제거 가능한데, 이벤트 핸들러가 단 한번 호출된다.
• 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 null을 할당하여 제거한다.

3. 이벤트 객체

• 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되는데, 생성된 이벤트 객체는 이벤트 핸들러의 첫번째 인수로 전달됨.
• 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야함!!!

👾 #1

function showCoords(e) {
  console.log(`clientX: ${e.clientX}, clientY: ${e.clientY}`);
}
document.onclick = showCoords;

📍 이벤트 핸들러 어트리뷰트 방식의 경우 event가 아닌 다른 이름으로는 이벤트 객체를 전달받지 못한다!!!

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

• type: 이벤트 타입
• target: 이벤트를 발생시킨 DOM 요소
• currentTarget: 이벤트 핸들러가 바인딩된 DOM요소
• eventPhase: 이벤트 전파 단계
• bubbles: 이벤트 버블링 전파 유무,불린
• cancelable: preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부, 불린
• defaultPrevented: preventDefault 메서드를 호출하여 이벤트 취소했는지 여부
• isTrusted: 사용자의 행위에 의해 발생한 이벤트인지 여부, 불린
• timeStamp: 이벤트가 발생한 시각(밀리초)

4. 이벤트 전파

• 캡쳐링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전달
• 타깃 단계: 이벤트가 이벤트 타깃에 도달
• 버블링 단계: 이벤트 하위 요소에서 상위 요소 방향으로 전달

5. 이벤트 위임

• 이벤트 위임을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요 없음.
• 동적으로 하위 DOM 요소를 추가하더라도 이벤트 핸들러 등록할 필요 없음.