# bubbling

dormahd114

이벤트 버블링은 HTML 문서 내에서 이벤트가 발생한 요소에서 시작하여 상위 요소로 차례로 전파되는 현상을 말합니다. 예를 들어, 특정 버튼을 클릭했을 때, 해당 버튼의 이벤트가 발생한 후에 그 이벤트가 해당 버튼의 부모 요소, 그 부모의 부모 요소, 그리고 계속해서

taek2yo

이벤트 버블링과 캡처링에 대해서 알아보자.

yhko1992

우선 리액트 플젝에서 three dots 아이콘을 누르면 context menu가 랜더링 되도록하고 이후 menu의 바깥 쪽을 클릭하면 없어지게 하기 위하여 useUnmountIfClickedOutside(이하 커스텀 훅) 를 이용하였다.그런데 위의 커스텀 훅에서 이벤

ktw9115

11-01 클릭을 하면 아래쪽에있는 부모도클릭이 된다. 자식과 부모의 이벤트가 둘 다 발생 이벤트가 전파된다고 함. propagation 전파 전파가 뽀글뽀글 위로 올라간다하여 이벤트 버블링 이벤트 캡처링(버블링의 반대고 따로 옵션을 줘야 만들 수 있음) 부모에

gogumaguma

이벤트가 상위 요소로 전달되는 특성이벤트가 하위 요소로 전달되는 특성클릭한 요소의 이벤트만 발생시키고 이벤트가 전달 되는 것을 막는다.요소의 여러 이벤트가 등록됐을 때 다른 이벤트의 실행을 막는다.기본으로 정의된 이벤트를 작동하지 않도록 막는다.

jinic

options Optional이벤트 수신기의 특징을 지정할 수 있는 객체입니다. 가능한 옵션은 다음과 같습니다.capture이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언

imconfi11

useOnClickOutside에서 mousedown 이벤트 대신 click 이벤트 적용하기

tjdus3431

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 최상위 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상<div class="DIV3">DIV3</div> 를 클릭하면 할당되어 있는 이벤트가 발생하고 다음에는

ikolp34

자식요소에 이벤트를 발생시키면, 상위의 부모요소의 이벤트도 같이 발생하는 것이 이벤트 버블링이다.위와 같은 예제에서 가장 하위 자식 요소인 three 클래스를 가진 요소를 클릭했을 때 이벤트 버블링으로 인해 상위의 부모 요소들이 전부 차례대로 실행이 된다.이러한 이벤트

vieowf23r

사용자가 다음과 같은 행동을 하면 반응클릭, 드래그, 드롭, 호버, 스크롤, 키 입력, 등등마우스 포인터를 해당 요소 위에 올리면 실행. onclick과 똑같이 쓰인다.여러가지 방법으로 작동되게 만들 수 있다.요소를 먼저 선택하고, 제너럴 메서드인 addEventLis

badassong

이벤트 버블링(bubbling)이란 상위부모로 이벤트가 전파되는 것이다!다시 말해 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 부모 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당

euji42

이벤트 전파와 버블링, 캡처링

doooooring

이벤트 버블링(bubbling) 이란 자식 요소에 부여된 이벤트를 핸들링 하였을 때, 같은 이벤트에 한해서 부모 요소의 이벤트도 같이 작동되는 것이다. 아래의 예시를 보자

bigwave-cho

모든 부라우저는 이벤트 버블링이 발생한다.이벤트가 상위 html로 퍼지는 현상임.h4 클릭하면 상위 두개의 div도 클릭한 것처럼 작동하면서결과적으로 3번 눌리게 됨.e.target : 유저가 실제로 누른 곳.e.currentTraget : 이벤트리스너가 달린 요소=

jungcolor

사용자의 액션에 의해 다이나믹한 화면을 구성함에 있어 Javascript의 이벤트는 가장 중요한 키워드가 아닐까 싶습니다. 이벤트에서 버블링(Bubbling)과 캡쳐링(Capturing)이 무엇이고 어떻게 동작하는지 알아보겠습니다표준 DOM 이벤트에서 정의한 3가지 이

timosean

🧐사건 발생

shorrysorry

버블링 & 캡쳐링

hoje15v

Implementing Smooth Scrolling scroll 관련 알아두면 좋은 정보들 > * getBoundingClientRect() : relative to visible viewport window.screen : 모니터 size window.outer

gygy

상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다.capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,t

goodenough

이벤트 버블링은 어떤 요소에 이벤트가 발생했을때 어떠한 한 요소의 이벤트만 실행시키고 싶어도 그 요소가 속한 부모요소에 까지 이벤트가 전파되어 전부 다 실행되어지는 것을 말한다.이벤트 캡쳐링은 어떤 요소에 이벤트가 발생했을때 최상위 부모로부터 이벤트가 발생된 요소까지