💫 JavaScript 이벤트

Bubbling/Capturing

• bubbling : 이벤트 실행된 태그에서 시작해서 상위로 이벤트 전파
• caturing : 이벤트가 실행된 태그의 위위위위위의 슈퍼조상태그인 DOM에서부터 이벤트가 실행된 태그까지 이벤트 진행

이벤트 객체

• 이벤트 객체는 DOM 트리를 따라 DOM 이벤트 흐름에 의하여 전파된다.
• 그렇다면, DOM 이벤트 흐름(이벤트 전파 경로)은?

이벤트 전파 경로

• 현재 이벤트가 전파되는 이벤트 대상들의 정렬된 목록
• 현재 문서의 트리 구조를 따라 구조적인 경로로 나타내게 됨
• 전파 경로의 마지막은 이벤트 대상이며, 목록의 앞선 대상들은 현재 대상의 부모 요소들
  • 예: "돔, 부모태그1, 부모태그2, .... , 이벤트 대상 태그"
• 전파 경로가 한 번 정의된다면, 이벤트 객체는 각 전파 단계를 따라 전파된다.
• 그렇다면, 전파 단계는 무엇?

전파단계

이전 단계에서 stopPropagation()등이 호출되는 경우 이후의 이벤트 단계를 생략된다.
1) 캡쳐링 단계 : window 객체로부터 대상의 부모까지 순서대로 전달되는 단계
2) 이벤트 대상 단계: 이벤트 객체가 이벤트 대상에 도달하는 단계, 이 단계에서 이벤트가 버블링 단계를 거치지 않는다고 명시하면, 이벤트 객체는 다음 단계를 생략
3) 이벤트 버블링 단계: 이벤트 객체가 대상의 부모로부터 window 객체까지 역순으로 전파

일단 이벤트가 발생하고 나면

• 일단 이벤트가 발생하고 나면, 이벤트 핸들러 안에서 DOM이 수정되더라도 이벤트 전달은 중단되지 않고, "원래의 경로"를 통해서 이벤트가 전파된다.

이벤트 발생 과정 정리

1) 특정 DOM에서 이벤트 발생
2) 해당 DOM의 dispatchEvent()라는 함수를 통해서 이벤트 전달
3) 이벤트 전달은 propagation path(전파경로)에 따라서 수행됨
4) 전달단계(1) 진행: 이벤트 캡쳐링
5) 전달단계(2) 진행: 이벤트 대상에 해당하는 이벤트 핸들러 호출
6) 전달단계(3) 진행: 이벤트 버블링

• 디폴트는 버블링

실습코드

https://codesandbox.io/s/jek-event-bubbling-and-capturing-ff4br?file=/index.html&resolutionWidth=320&resolutionHeight=675

Reference

• 책/속깊은 JavaScript/양성익지음/루비페이퍼, 5.2.1 이벤트 버블링과 캡쳐링

---

1. 이벤트 등록 (addEventListener)

"adddEventListener('이벤트타입', 함수명, false)"에서 false는 무엇인가?**

이벤트 함수의 간단한 예제는 아래와 같다. (출처:MDN)

"adddEventListener('이벤트타입', 함수명, false)" 이렇게 쓰는데!
마지막 false의 정체는 무엇일까?

MDN에서 addEventListener의 문법을 살펴보니 아래와 같다.

잘 모르겠다.........

"false"의 정체를 살펴보기 위해 찾은 첫번째 자료!

"이벤트 리스너 사용 예제"
clickNode.addEventListener('click', handleClick, false); 소스에서 세번째 파라미터가 false 이면 버블링을 리스너가 처리하고 true이면 캡쳐링을 리스너가 처리한다. 전파(propagation)에 대해 버블링 막기는 event.stopPropagation() 호출한다. 태그에 할당된 이벤트를 막기위해 예로 태그의 화면 이동을 막기위해 event.preventDefault() 호출한다.

(출처: https://mobicon.tistory.com/474)

버블링과 캡쳐링을 키워드로 찾은 2번째 자료!

브라우저에서 어떻게 특정 화면 요소의 이벤트를 감지하는지 그리고 그 이벤트를 어떻게 다른 화면 요소에 전파하는지 같이 알아보겠습니다.
(출처: https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/)

2번째 자료를 통해서
알게된 내용을 정리해 보겠다.

이벤트 버블링 vs. 이벤트 캡쳐**

• 이벤트 버블링: 이벤트가 발생했을 때, 해당 이벤트가 상위의 화면요소로 전달되는 특성
  • 예) "adddEventListener('이벤트타입', 함수명, false)"
  • "false"라고 하지 표시 안하면 디폴트가 false임
• 이벤트 캡쳐: 이벤트가 발생했을 때, 해당 이벤트가 하위의 화면요소로 전달되는 특성
  • 예) "adddEventListener('이벤트타입', 함수명, true)"

2. 이벤트 전달방식: 버블링/캡쳐/Stop Propagation/위임

리액트는 아래의 3가지 방식 중 어떤 방식일까? 이벤트 위임일까?

2-1. Event Bubbling

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성

2-2. Event Capture

이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

2-3. Event Stop Propagation

그냥 원하는 화면 요소의 이벤트만 신경 쓰고 싶다
해당 이벤트가 전파되는 것을 막음

2-4. Event Delegation (이벤트 위임)

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

Reference

• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 (https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/)