[JavaScript] 이벤트

이벤트란 사건이 발생하는 것을 의미한다. HTML DOM 요소들은 이와 같은 이벤트가 발생했을 때 웹 브라우저에서 알아차릴 수 있는 이벤트 신호를 발생시키는데, 이때 자바스크립트는 발생한 이벤트에 반응하여 지정한 동작을 수행할 수 있다.

 

이벤트의 종류

• 키보드 이벤트
• 마우스 이벤트
• form 이벤트

 

이벤트 리스너

이벤트 리스너 등록

자바스크립트에서 이벤트에 대한 반응을 지정하기 위해서는 해당 이벤트를 감지할 수 있는 이벤트 리스너를 사용해서 이벤트 핸들러를 지정해야 한다.

// <button>클릭</button>

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

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

 

이벤트 리스너 삭제

이벤트 리스너를 삭제하기 위해서는 removeEventListener()를 사용한다.

// <button>클릭</button>
// <button class="del">이벤트 삭제</button>

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

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

const delButton = document.querySelector('.del');

function delHandler(event) {
	button.removeEventListner('click', handler);
    }

delButton.addEventListener('click', delHandler);

 

이벤트 전파

어떤 요소에서 발생한 이벤트는 부모 또는 자식에게 전파되는데, 이때 전파되는 방향에 따라 버블링 방식과 캡쳐링 방식으로 구분할 수 있다.

 

버블링

버블링 방식은 이벤트가 발생한 요소부터 해당 요소의 조상들에게 차례대로 이벤트가 전파되는 방식이다. 즉, 이벤트가 발생한 요소에 할당된 핸들러가 동작하고, 해당 요소의 조상들의 핸들러 역시 차례대로 실행되어 최상단의 조상 요소까지 이어진다.

/* <div class="parent">
	<div class="child">
    <button>클릭</button>
    </div>
    </div> */

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const button = document.querySelector('button');

parent.addEventListener('click', () => console.log('Parent!'));
child.addEventListener('click', () => console.log('Child!'));
button.addEventListener('click', () => console.log('Button!'));

 

event.target

이벤트가 버블링 방식으로 전파될 때 부모 요소에 할당된 핸들러의 event 객체는 이벤트를 발생시킨 정확한 대상을 가지고 있으며, event.target으로 접근할 수 있다.

/* <div class="parent"> Parent 요소
<div class="child"> Child 요소
<button>클릭</button>
</div>
</div> */

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const button = document.querySelector('button');

function handler(event) {
console.log(event.target);
}

parent.addEventListener('click', handler);
child.addEventListener('click', () => {});
button.addEventListener('click', () => {});

 

event.currentTarget

실제 이벤트가 발생한 요소를 가리키는 event.target과 달리 event.currentTarget은 현재 실행 중인 핸들러의 주체를 가리킨다.

function handler(event) {
	console.log(event.currentTarget);
    }

 

캡쳐링

캡쳐링 방식은 버블링 방식과 반대로 최상단 조상 요소부터 이벤트가 발생한 요소까지 이벤트가 전파되는 방식이다.

/* <div class="parent"> Parent 요소
<div class="child"> Child 요소
<button>클릭</button>
</div>
</div> */

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const button = document.querySelector('button');

parent.addEventListener('click', () => console.log('Parent'), true);
child.addEventListener('click', () => console.log('Child'), true);
button.addEventListener('click', () => console.log('Button'), true);

 

캡쳐링 방식이 실제로 쓰이는 경우는 매우 드물다.