# capturing

[JS]scrollIntoView event handlers, bubbling & capturing, event delegation, DOM traversing
Implementing Smooth Scrolling scroll 관련 알아두면 좋은 정보들 > * getBoundingClientRect() : relative to visible viewport window.screen : 모니터 size window.outer
.gif)
[JS30] -25) Event Capture, Bubbling, Propagation and Once
상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다.capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,t

Day.18 바닐라 자바스크립트(2021.08.25)
HTML > BODY > BUTTON 위에 코드를 실행해보면 화면에 버튼 한개가 보인다. 이때 버튼을 클릭하게 되면 어떤일이 벌어질까?결과값 : button,body,html 출력 html태그들은 중첩되있기 때문에 이벤트가 발생할시 특정 event flow가 발생한

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

[JavaScript] 이벤트 버블링, 캡쳐링, 위임
프론트엔드 면접을 볼 당시에 이벤트 버블링, 캡쳐링에 대한 질문을 받았었는데 대답을 제대로 하지 못해 면접을 시원하게 말아먹었던 기억이 생각나 작성하는 포스팅... 다신 볼 일없게 꼼꼼하게 정리하자..!
이벤트 캡처링 & 버블링
Html 조작을 위해 스크립트를 작성하다 보면 종종 내가 원하는 곳에 이벤트를 할당하고 제어하는것이 어려울 때가 있다.HTML 태그를 살펴보면 form > div > p 의 상관관계가 있다.그럼 만약 p 태그를 클릭한다면 어떤일이 발생할까?p => div => form
TIP) React, Capturing 막는 법.
리액트 컴포넌트를 만들면서, 인풋 Search-Bar를 제외한 컴포넌트를 눌렀을 때, 창이 안보이게 막는 함수 입니다.currentTarget과 함수가 등록된 target을 비교하여, 둘이 같을 때만 함수가 실행되도록 합니다.

[JS]이벤트 전파 캡쳐링, 버블링
addEventListenertarget.addEventListener(type, listener, useCapture);addEventListener의 구문이다.type : 이벤트의 유형listener : 이벤트가 발생했을 때 실행하는 콜백함수useCapture :

버블링(Bubbling) & 캡처링(Capturing)
직접 태그에 적용하는 방법입니다. DOM 요소를 가져와서 on을 이용해서 이벤트를 적용하는 방법입니다.target.addEventListener(type, listener, options);javascript에는 이벤트를 추가하는 방법 중 가장 추천하는 방법은 addE