일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- dvh
- ELECTRON
- augmentedDevice
- 티스토리 성능
- react-native-dotenv
- electron-packager
- 이미지 데이터 타입
- camera access
- adb connect
- ffi-napi
- Failed to compiled
- device in use
- npm package
- Recoil
- nextjs
- adb pair
- silent printing
- rolldown
- react-native
- html
- custom printing
- github lfs
- github 100mb
- Can't resolve
- animation
- vercel git lfs
- Git
- Each child in a list should have a unique "key" prop.
- camera permission
- github pdf
- Today
- Total
Bleeding edge
Javascript - Event bubbling, Event Capturing 본문
FE 면접 질문을 검색하다보면, 종종 이벤트 버블링, 이벤트 캡쳐링에 대한 질문이 나온다. 마침 공부하던 영상에서 나왔고, 실제로 혼자 토이프로젝트를 만들다보면 만나던 이슈가 바로 이거였다니..!!하고 봐서 너무 신기하고 반가웠던 개념이었다.
<body>
<header>
<ul>
<li>
</li>
</ul>
</header>
</body>
버블링과 캡쳐링에 앞서서, 지금 버블링과, 캡쳐링에 이야기하는 셀렉터는 꼭 이 셀렉터가 아니라, depth위치를 기준으로 하위 셀렉터인지 상위 셀렉터인지를 구분하기위해 이야기를 하는 것이다. 예시 li를 누르면 ul에! 라고 할 때는, li가 하위 ul를 상위와 같은 관계에 있다면 div 안의 div에서도 같게 적용된다.
Event bubbling : li를 눌렀는데 ul, header , body 즉, 상위 요의 셀렉터에 이벤트(클릭이나 마우스 다운과같은)가 전달되는 현상을 말한다
Event capturing : 버블링과 반대로 body에서 li까지 이벤트가 전달되는 현상
해결방법
function logEvent(event) {
event.stopPropagation();
}
다음과 같이 stopPropagation을 이용하여, 이벤트의 전파를 막을 수 있다. 하지만 이방식 보다는, 이벤트 위임이라는 방식으로 막는 것이 더 좋다.
이벤트 위임이란? (Event delegation)
이벤트의 상위 요소에 하위요소에서 일어날 이벤트를 위임함으로써, 이벤트 버블링이나 캡쳐링을 막을 수 있다.
또 다른 장점?
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
이벤트 위임을 안하면, li에 5번 addeventlistener을 사용해야하지만, ul에 위임하면 단 한번이면 되기에 브라우저에 부담이 덜간다.
이벤트 위임방법 1. if else
const items = document.querySelector('ul');
items.addEventListener('click', (event)=>{
if(event.target.nodeName ==='LI'){
//func when click li
}else{
//func
}
})
이벤트 위임방법 2. if
(1번방법에서 else만 제외했다)
const items = document.querySelector('ul');
items.addEventListener('click', (event)=>{
if(event.target.nodeName ==='LI'){
//func when click li
}
})
이벤트 위임방법 3. li가 아닌 것을 눌렀을 때 return
const items = document.querySelector('ul');
items.addEventListener('click', (event)=>{
if(event.target.nodeName!=='LI'){
return; //prevent event diffuse
}
//when click li
})
여기서 잠깐, 꼭 nodeName이 아니라 classList와 같이 다른 것을 사용해도 된다는점!
'Javascript' 카테고리의 다른 글
문서와 리소스의 로딩 (0) | 2022.04.22 |
---|---|
Javascript - debounce, throttle (0) | 2022.04.08 |
Javascript - Promise (0) | 2022.04.07 |
this this this this (0) | 2022.04.07 |
JS로 어떤 걸 할 수 있을까? (0) | 2022.04.06 |