[JavaScript]EventBubbling

EventBubbling

EventBubbling 내용을 학습하며 다음과 같은 의문이 생겼다.

• 이벤트가 하단부터 전달된다?

• 이벤트가 상위요소로 전달된다는 말이 무슨 말일까?

• 이벤트란 정확히 뭐길래 이게 전달이 되는거지?

• 전달은 정확히 뭐길래 상위 요소에게 전달된다고 표현할까?

• 캡쳐링은 상단부터 시작한다?

어떤 원리로 이럴까?

이에 대한 답을 내고자 한다.

설명 참조

• https://www.edwith.org/boostcourse-web/lecture/16760/
• https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
• https://en.wikipedia.org/wiki/Event_bubbling

정의

자바스크립트에서 이벤트 발생시 최하위 요소에서부터 상위요소 순으로 이벤트가 발생하는 방식.

정리

내 추측을 한마디로 말하자면

"Stack구조로 Element를 담은 뒤, 해당 element내용을 실행한 뒤 pop한다. Stack을 비울때까지."

이벤트

• 참조 https://ko.wikipedia.org/wiki/%EC%9D%B4%EB%B2%A4%ED%8A%B8_(%EC%BB%B4%ED%93%A8%ED%8C%85)

• 사전적 정의

  이벤트(event)란 프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건을 말한다

  관심 대상을 감지해야 한다고 생각할 수 있다.

  관심있는 대상을 감지했을 때 이벤트가 발생했다고 볼 수 있고, 관심있는 대상을 이벤트라 할 수 있다.

  브라우저에서 관심있는 동작이나 사건은 마우스 클릭, 키보드 입력 등등을 말할 수 있겠다.

전달

• 특정 이벤트가 발생할 경우 하위 요소에서 상위 요소로 이벤트 발생시 동작이 처리되는 것을 말한다.

  특정 element에 마우스 클릭을 한다면, 해당 엘레먼트의 최하위 요소에서 이벤트가 발생한다. 그리고 그 상위요소에서 이벤트발생, 그 상위요소.... 최상위요소에 도달할 때까지 이벤트가 발생한 것처럼 보이게 된다.

  이런것을 이벤트의 전달이라고 한다.

그러면 왜 이런 일이 발생한걸까?

전제

1. 문서 요소들은 DomTree를 따른다.

상황

마우스 클릭이라 가정.

추측

이벤트 핸들러가 stack구조이기 때문에 이와같은 일이 발생한다.

1. 그 stack엔 돔의 요소가 담긴다.
2. 이벤트 발생시 최상위 요소가 이벤트 핸들러에 담긴다.
3. 그리고 트리 탐색 알고리즘처럼 최하위 요소를 탐색하며 요소들을 이벤트핸들러에 담는다.
   • 이때 이벤트 발생에 해당하는 하위요소인지 확인하는 작업 필요. 상위 요소가 이벤트 발생 범위가 더 포괄적이기 때문
4. top부분에 위치한 요소에서 이벤트 발생시 작동하는 함수를 실행한다.
5. pop한다.
6. 4~5과정 반복

위와 같이 동작하기에 Capturing은 상위에서 하위로, bubbling은 하위에서 상위로 발생하는 것 같다.