이벤트 버블링 - 이벤트가 상위 요소로 전파되는 현상
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>각 div에 currentTarget.className을 콘솔에 찍는 함수를 콜백함수로 넣고 .three를 누르게 되면
three - two - one의 순서로 찍힌다
- 이벤트가 상위로 전파되기 때문에
.three를 클릭하게 되면 해당 div에 클릭 이벤트가 실행되고, 이후에 상위로 전파되어서 마치 .two를 누른 것처럼 해당 이벤트가 실행되고, .one을 거쳐 최상위 요소까지 전파되게 되는 것
유용할 때 - 이벤트 위임
보통 저렇게 하나하나 다 이벤트를 것 보다는, 상위 요소에만 이벤트를 달아서 이 곳에서 이벤트를 관리하는게 효율적
- 이벤트 버블링을 통해 하위 이벤트가 상위 요소로 전파될것이기 때문에
<div id='buttonWrapper'>
<button id='submit'/>
<button id='cancel'/>
</div>버튼에 클릭 이벤트를 주고 싶다면 지금 같은 상황에서는 각각 DOM을 통해 addEventListener를 직접 부착해 주는 방식도 괜찮지만,
만약에 버튼이 수십개가 되는 순간 document.querySelector()를 수십번 해서 거기에다 addEventListener를 수십 개씩 부착해줘야 함
이럴 때 가장 상위에 있는 div에 addEventListener를 걸어서, 클릭한 해당 버튼의 id값이 무엇인지만 알아내서 그에 따른 함수를 분기처리 해주면 한개의 addEventListener 만으로도 처리 가능
document.querySelector('#buttonWrapper').addEventListener('click',(e)=> {
e.target.id값에 따라 분기처리
}CurrentTarget과 target의 차이
만약에 버튼을 눌렀다고 가정한다면
- currentTarget은 이벤트를 달아놓은(생성해놓은) 위치, 즉 해당 예시에서는 div가 되고
- target은 실제로 클릭한 위치, 즉 버튼이 된다
그렇기 때문에 이벤트 위임을 했을 시에는 실제 누른 태그가 어떤 태그인지를 아는 것이 제일 중요하기 때문에 target을 사용해주면 됨
'JS' 카테고리의 다른 글
| Iterable/Iterator 정리 (0) | 2023.01.11 |
|---|---|
| parentNode/every some (0) | 2023.01.03 |
| var이랑 let,const 차이점 (0) | 2022.11.30 |
| SetTimeOut 함수쓸 때 주의점 (0) | 2022.11.30 |
| splice 정리 + slice랑 비교 (0) | 2022.11.29 |