# bubbling

25개의 포스트

javascript event

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

2023년 3월 3일
·
0개의 댓글
·

useOnClickOutside에서 click 이벤트 적용(feat. 이벤트 3단계 흐름)

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

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

[Javascript] 이벤트 버블링

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

2023년 2월 11일
·
0개의 댓글
·
post-thumbnail

이벤트 버블링(버블링 중단하기) / 캡쳐링

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

2023년 1월 29일
·
0개의 댓글
·

프론트엔드 복습 정리 20 : DOM 이벤트

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

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

[JS] 이벤트가 전파된다구?? 이벤트 버블링과 캡처링!!

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

2022년 11월 20일
·
0개의 댓글
·
post-thumbnail

이벤트 버블링과 캡처링 1 : Propagation

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

2022년 10월 30일
·
0개의 댓글
·
post-thumbnail

(js/html/css)이벤트 버블링/캡쳐링

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

2022년 10월 16일
·
0개의 댓글
·

[JS]이벤트 버블링

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

2022년 9월 25일
·
0개의 댓글
·

JavaScript - Event Bubbling / Capturing

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

2022년 9월 6일
·
0개의 댓글
·
post-thumbnail

Bubbling & Capturing

버블링 & 캡쳐링

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

[JS]scrollIntoView event handlers, bubbling & capturing, event delegation, DOM traversing

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

2021년 12월 22일
·
0개의 댓글
·
post-thumbnail

[JS30] -25) Event Capture, Bubbling, Propagation and Once

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

2021년 11월 14일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 버블링과 캡쳐링 (Bubbling & Capturing)

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

2021년 8월 11일
·
0개의 댓글
·

[JS] bubbling다루기

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

2021년 8월 7일
·
0개의 댓글
·
post-thumbnail

target / currentTarget

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

2021년 5월 11일
·
0개의 댓글
·
post-thumbnail

stopPropagation 과 preventDefault 차이는 뭘까??

stopPropagation 과 preventDefault 차이

2021년 3월 23일
·
0개의 댓글
·
post-thumbnail

Event

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

2021년 1월 17일
·
0개의 댓글
·
post-thumbnail

[JavaScript] 이벤트 버블링, 캡쳐링, 위임

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

2021년 1월 16일
·
0개의 댓글
·