# bubbling

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

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

say_ye

event.stopPropagation();부모 class로 bubbling이 일어나지않게됨 권장xevent.stopImmediatePropagation();부모 class로 bubbling이 일어나지 않으며 같은 타겟내에서 이후에 등록된 다른 eventlisnter도

faunus

Javascript 그리고 React를 사용하다보면 어떤 곳을 클릭해야하는 일이 생기며, 이 클릭한 요소를 가져오는 방법이 필요하다.이 때 사용하는 것이 바로 e.target.value 혹은 e.currentTarget.value 이다.그런데 이 둘은 어떻게 다른 것일

dfd1123

stopPropagation 과 preventDefault 차이

gay0ung

프로그래밍에서는 observer (정보의 변화를 감지하는 코드) 패턴이라는 실행방식이 있다.관찰 대상객체의 특정 정보가 변경되면 observer 코드가 이를 감지하고 정해둔 코드를 실행 하는 것이다.브라우저에서도 이와 같은 방식을 사용할때가 있다. DOM 이 만들어낸

soulee__

프론트엔드 면접을 볼 당시에 이벤트 버블링, 캡쳐링에 대한 질문을 받았었는데 대답을 제대로 하지 못해 면접을 시원하게 말아먹었던 기억이 생각나 작성하는 포스팅... 다신 볼 일없게 꼼꼼하게 정리하자..!