event handler
이벤트가 발생했을때, 브라우저
에 의해 호출될 함수
이벤트 핸들러 등록
이벤트가 발생했을때, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
이벤트 드리븐 프로그래밍이란?
이벤트와 그에 대응하는 이벤트 핸들러를 통해 사용자와 애플리케이션은상호작용
을 할 수 있다
프로그램의 흐름을이벤트 중심
으로 제어하는 프로그래밍 방식
마우스, 키보드 , 포커스, 폼, 값 변경, DOM 뮤테이션, 뷰, 리소스
이벤트가 있다
이벤트가 발생했을 때, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것
on접두사
와 이벤트 타입
으로 이루어져 있다.
이벤트 핸들러 어트리뷰트 값은 암묵적으로 생성될
이벤트 핸들러의 함수 몸체를 의미
이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 이벤트 타깃
과 이벤트의 종류를 나타내는 문자열인 이벤트 타입
그리고 이벤트 핸들러
를 지정할 필요가 있다.
const $button = document.querySelector('button');
$button.onClick = function ( ){
console.log('button click');
};
EventTarget.addEventListener('eventType', functionName, [,useCapture]);
단 addEventListener 메서드를 통해 참조한 동일한 이벤트 핸들러를 중복 등록
하면 하나의 이벤트 핸들러
만 등록된다.
const $button = document.querySelector('button');
$button.addEventListener('click', function( ){
console.log('button click');
});
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;
DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파
이벤트 타깃을 중심으로 DOM 트리에 펼쳐짐