Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 백준 #적록색약
- 이친수
- React #리액트 이벤트 주기 #리액트 이벤트
- interceptors
- 코드스테이츠 #알고리즘 #그리디
- react fragment
- React #controlled component #비제어 컴포넌트 #제어 컴포넌트
- React-Query
- html entities
- 다익스트라 #파티 #백준
- 백준 #직각삼각형
- 노마드 코더 #타입스크립트 #typescript #class
- axios
- #useRef #언제 쓰는데?
- DP #c++
- 버블링 #갭쳐링 #이벤트 #JS
- react
- 플로이드 #c++
- JWT #토큰 #refreshToken #accessToken #Token #token #localStorage #sessionStorage
- react #useCallback #react Hook
- 빡킹독
- rate limit
- 얕은 복사 #깊은 복사 #shallow copy #deep copy
- RateLimit
- donwstream #upstream #origin
- React #Hook rules #Hook 규칙
- useState #Hooks
- raect typescript #react #typescript #styled-component
- React #effect hook #useEffect
- npm #not being able to find a file #npm install Error
Archives
- Today
- Total
목록버블링 #갭쳐링 #이벤트 #JS (1)
꿈꾸는 개발자
Javascript 이벤트 버블링/캡처링
버블링(bubbling) 정의: 버블링은 한 요소의 이벤트가 발생하면 해당 요소에 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 동작하는 형식을 말한다. 해당 과정은 가장 최상단의 요소(document 객체)를 만날 때까지 반복된다. 위 사진에서 태그 영역을 클릭하게 되면 p 태그에 할당된 헨들러만 동작되는 것이 아닌, div, form에 있는 핸들러들까지 순차적으로 작동하게 된다! => 이처럼, p는 가된 element에서 가장 최상단 요소까지 핸들러가 동작하게 되는 것이다. 거의 모든 이벤트는 버블링 된다(즉 예외는 존재함!) => ex) focus이벤트는 버블링X Event.target event.targe로 이번트가 발생한 target요소에 접근 가능! event.target vs thi..
프로그래밍언어/Javascript
2023. 1. 13. 14:50