[JS] Events 이해하기

borderline0px·2021년 5월 16일
0

JavaScript

목록 보기
1/3

1. EventTarget Methods

DOM 요소들은 모두 eventTarget임

  • EventTarget.addEventListener()
  • EventTarget.removeEventListener()
  • EventTarget.dispatchEventListener()

2. Event Capturing

이벤트가 하위 요소로 전파되는 단계
실제 코드에서 자주 사용되지는 않음


3. Event Bubbling

3.1 개념

이벤트가 상위 요소로 전파되는 단계
한 요소에서 이벤트가 발생하면, 이 요소에 할당된 핸들러가 작동하고
이어서 부모요소, 최상위 요소에까지 핸들러가 작동하는 현상

3.2 Event Target

event.target: 실제 이벤트가 시작된 요소
this(event.currentTarget): ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조


4. Event.stopPropagation()

4.1 Event.stopPropagation()

이벤트 버블링을 중단하고 싶을 때 사용
한 요소에 여러 핸들러가 있는 경우, 버블링은 계속 발생함

4.2 Event.stopImmediatePropagation()

버블링을 멈추고, 다른 핸들러의 동작도 막고싶을 때 사용

4.3 꼭 필요한 경우가 아니라면 버블링 막지 말자

만약 사람들이 페이지의 어디를 클릭했는지 행동 패턴을 분석하기 위해
window내에서 발생하는 모든 클릭이벤트를 감지하기로 결정
이 상황에서 이벤트 버블링을 막아놓은 영역에서는 분석 시스템 코드가 작동하지 않기 때문에 분석이 제대로 되지 않음

위와 같은 시나리오 뿐만아니라 이벤트 버블링을 막아야 할 경우는 거의 없다고 한다. 또한, 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 이용해 막을 수 있는 다른 수단도 있음


5. Event.preventDefault()

브라우저의 기본 기능을 취소할 때 사용 => 브라우저의 행동이 무시됨
예를 들어, 마우스 우클릭 시 나오는 기본 동작을 제어하고 싶을 때
활용할 수 있음

그렇지만, wheel 이벤트 핸들러와 같이 빠르게 동작해야하는 passive eventListener에서는 preventDefualt() 동작하지 않음


6. Event Delegation

  • 캡쳐링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있음
  • 부모 요소에 이벤트 핸들러를 등록함으로써, 하위의 여러 요소를 한꺼번에 다룰 수 있음

만약 ul태그 안에 있는 li태그들에 이벤트 핸들러를 등록하려는 경우,

const lis = document.querySelectorAll('li');
lis.forEach(li => li.addEventListener('click', ));

Array.forEach()를 사용해서 여러 요소에 이벤트 핸들러를 등록하는 것 보다는

const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
	if(e.target.tagName == "LI") {
    	e.target.classList.add('checked');
    }
});

li의 상위 요소인 ul태그에 이벤트 핸들러를 등록하여 활용할 수 있다

profile
어려운 게 아니라 낯설어서 그런거야

0개의 댓글