# Event propagation

eeuglena

목표 강의에서 소개하는 이벤트 전파에 관련된 사항을 정리해 보자. 함수에서 this 본론으로 들어가기 전에 우선 함수에서 this를 처리하는 방식을 간단히 살펴보려고 한다. 페이지는 총 3개의 div가 중첩된 구조이며(body > .one > .two > .three) 마우스 버튼을 누를 때는 화살표 함수로 this를 출력하고 버튼을 뗄 때는 함수 표현식으로 this를 출력하도록 했다. 결과는 다음과 같다. 화살표 함수에서는 this가 window로, 함수 표현식에서는 this가 이벤트를 처리하는 대상으로 지정

fe_jungseok

이벤트 전파(propagation) DOM 트리상에 존재하는 모든 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다. 이를 이벤트 전파라고 한다 사용자의 다양한 입력을 통해 동적으로 생성되는 이벤트 객체는 이벤트를 발생시킨 타깃(target)을 중심으로 DOM 트리를 통해 전파된다. 이벤트 버블링(bubbling) 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 의미한다. div 태그 한 개만 클릭했을 뿐인데 왜 3개의 이벤트가 발생되는 걸까요? 그 이유는 브라우저가 이벤트를 감지하는 방식 때문입니다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전

dbstjrwnekd

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생(trigger)시킵니다. 예를 들어 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정 타입의 이벤트를 발생시키죠. 애플리케이션이 특정 이벤트에 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임합니다. 이벤트가 발생했을 때 호출될 함수를 "이벤트 핸들러", 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 "이벤트 핸들러 등록"이라 합니다. 이벤트 전파(event propagation) DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됩니다. 이를 이벤트 전파(event propagation)라고 합니다. 위 코드에서 li 요소를 클릭하면 클릭 이벤트가 발생합니다. 이때 **생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 event target을

ckdgus2246

Event bubbling and capturing Bubbling Capturing Event delegation 1. Bubbling? element에서 event가 발생할 때, 해당 element의 handler를 실행시키고, html/document/window element까지의 ancestor elements를 따라 동일한 event에 대해 등록된 handler를 순차적으로  실행시킨다. lv1을 클릭하면, lv1 > lv2 > lv3 handler가 순차적으로 실행되며 물에서 거품이 생겨나듯이 inner El로부터 parent Els에 대해 event가 bubble된다하여 이를 event bubbling이라고 한다. 이 떄, 최초로 event를 촉발시킨 element를 target element라 하며, 외부 handler에서는  event.target으로 access할 수 있다. (이는 `event.curren

hyeon930

프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat 웹 프로젝트를 하면 Modal을 빼놓을 수 없다. 유저와 서비스가 상호작용하도록 만드는 굉장히 유용한 방법이기 때문이다. 자주 만들어서 그런지 어렵지 않게 만들 수 있고 Bootstrap과 같은 다양한 UI 컴포넌트 프레임워크에서도 많이 제공하기 때문에 별 생각없이 사용해왔다. 하지만, Modal에서도 중요한 배울점이 있었다. 바로 자바스크립트의 Event Bubbling과 Event Capture다. 단순하게 alert창을 만든다면 그리 신경 쓸 구석이 없다. 하지만 Modal 내부에서 다양한 이벤트가 필요할 때 Modal 외부를 클릭했을 때 Modal을 숨기고자 할 때 처럼 이벤트가 쓰이기 시작하면 자바스크립트의 이벤트