[JS] 이벤트의 모든 것 : 이벤트 핸들러, 버블링, 캡쳐링

이벤트란?

이벤트(event)란, 웹페이지에서 발생하는 사용자 상호 작용을 말함

즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말함

• 마우스 이벤트: click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout
• 키보드 이벤트: keydown, keyup, keypress
• 폼 이벤트: submit, change, input
• 포커스 이벤트: focus, blur
• 윈도우 이벤트: load, resize, scroll

 

이벤트 핸들러란?

Javascript에서 이벤트를 다룰 때 이벤트 핸들러를 사용함

• 이벤트 핸들러 → 이벤트가 발생했을 때 실행되는 함수
• 즉, 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지 정의해주는 것

<button onclick='btnClick'>클릭</button>

 

이벤트 리스너란?

Javascript에서 이벤트를 동적으로 처리하는 방식을 말함

• addEventListener 메서드를 이용해 이벤트를 대상 요소에 연결→ 이에 따라 실행될 함수(이벤트 핸들러) 전달

<button id='btn'>클릭</button>

var Button = document.getElementById('btn');
Button.addEventListener('click', btnClick()); 
// 이벤트 리스너(이벤트 이름, 이벤트 핸들러 함수)

// 이벤트 핸들러
const btnClick = () => {
	alert('클릭')
}

 

 

이벤트 객체

• e.target.value: 주로 입력 요소에서 발생하는 이벤트, 이벤트가 발생한 요소 자체를 가리킴
• e.currentTarget: 이벤트 핸들러가 현재 실행 중인 요소를 가리키는 속성, 이벤트 버블링이나 캡처링에서 어떤 요소에서 이벤트가 발생했는 지에 대한 정보 제공
• e.preventDefault(): 이벤트의 기본 동작을 취소하는 메서드
• e.stopPropagation(): 이벤트 전파(버블링 or 캡처링)을 중지시키는 메서드

 

이벤트 버블링과 캡처링

이벤트 전파 방향에 따라 버블링과 캡처링으로 구분함

브라우저는 캡쳐링으로 탐색하고 버블링으로 돌아오는 과정을 거침 ⇒ 캡처링에서 버블링 순서

• 버블링(Bubbling): 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값)
• 캡처링(Capturing): 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

 

이벤트 위임

<ul id='post-list'>
	<li id='post-1'>Item 1</li>
	<li id='post-2'>Item 2</li>
</ul>

여러 개의 리스트가 있을 때, 몇번째 리스트를 선택하든 이벤트를 발생시키고 싶다면 ?!

• <ul> 요소에 이벤트를 등록! → 어떤 몇 번째 li 요소를 클릭하든 부모 요소로 이벤트가 전파되기 때문에!

즉, 여러 요소들의 공통된 조상에 이벤트 핸들러를 할당 해 여러 요소들을 한꺼번에 핸들링할 수 있는 기법을 이벤트 위임이라고 한다 ~

 

이벤트 버블링

브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파

element.addEventListener('click', (e) => { ... }, false);

• 거의 모든 이벤트는 버블링 된다
• 다만 focus 이벤트와 같이 버블링 되지 않는 이벤트도 존재

 

이벤트 캡처링

버블링의 반대, 한 요소에 이벤트가 발생되면 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파

element.addEventListener('click', (e) => { ... }, true);
element.addEventListener('click', (e) => { ... }, {capture: true});

• 캡처링은 IE8 이하에서 지원되지 않는다.

 

이벤트 전파 방지 방법

• e.stopPropagation() : 이벤트 전파 중지
• e.stopImmediatePropagation() : 이벤트 전파 중지 + 형제 이벤트 실행 중지
• e.preventDefault() : 이벤트 전파 중지 + 형제 이벤트 실행 중지 + 이벤트 기본 동작 중지

 

 

---

 

( •̀ω•́ )و✧ 한 줄 컷 !

자 그럼 오늘도 아래와 같이 면접관이 물어본다면 어떻게 답해야 할까?

"이벤트 위임과 버블링, 캡처링에 대해 설명해주실 수 있을까요?"

 

이벤트 위임은 여러 요소에 개별적으로 이벤트 핸들러를 붙이는 대신, 공통된 부모 요소에 하나의 이벤트 핸들러를 등록하여 자식 요소들의 이벤트를 한 번에 처리하는 기법입니다.

이벤트 전파 방법에 따라 버블링과 캡처링을 구분하는데,
버블링은 이벤트가 자식 요소에서 부모 요소 방향으로 전파되는 것,
캡처링은 반대로 부모 요소에서 자식 요소로 내려가며 전파되는 것을 의미합니다.

 

 

 

이렇게 대답하면 되겠지 ?! 자 그럼 끝 !