1. 이벤트 드리븐 프로그래밍

event handler
이벤트가 발생했을때, 브라우저에 의해 호출될 함수

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

이벤트 드리븐 프로그래밍이란?
이벤트와 그에 대응하는 이벤트 핸들러를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다
프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식

2. 이벤트 타입

마우스, 키보드 , 포커스, 폼, 값 변경, DOM 뮤테이션, 뷰, 리소스 이벤트가 있다

3. 이벤트 핸들러 등록

이벤트가 발생했을 때, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

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

on접두사와 이벤트 타입으로 이루어져 있다.
이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미

📍 이벤트 핸들러 프로퍼티 방식

이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 이벤트 타깃과 이벤트의 종류를 나타내는 문자열인 이벤트 타입그리고 이벤트 핸들러를 지정할 필요가 있다.

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

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

📍 addEventListener 메서드

EventTarget.addEventListener('eventType', functionName, [,useCapture]);

단 addEventListener 메서드를 통해 참조한 동일한 이벤트 핸들러를 중복 등록하면 하나의 이벤트 핸들러만 등록된다.

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

$button.addEventListener('click', function( ){
  console.log('button click');
});

4. 이벤트 핸들러 제거

addEvenetListener에 전달한 인수와 동일한 인수가 removeEventListener에 전달되어야 제거된다.
프로퍼티 방식으로 등록된 이벤트 핸들러는 null로 할당하여 제거

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

const handleClick = ( ) => console.log('button click');

$button.addEventListener('click', handleClick);

$button.removeEventListener('click', handleClick, true); //실패
$button.removeEventListener('click', handleClick); //성공

$button.onClick = handleClick;
$button.onClick = null;

5. 이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파
이벤트 타깃을 중심으로 DOM 트리에 펼쳐짐

• 캡쳐링 : 상위요소 -> 하위요소
• 타깃 : 이벤트 타깃에 도달
• 버블링 : 하위요소 -> 상위요소