버블링이란?
✔️ 한 요소에 이벤트가 발생하면, 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작함.이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 BUBBLE과 닮았기 때문에 버블링이라는 이름이 붙여짐
- 가장 최상단(맨위)의 핸들러를 만날때까지 과정을 반복하면서 동작함
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
<순서>
<p>에 할당된onclick핸들러 동작
바깥의
<div>에 할당된 핸들러 동작
그 바깥의
<form>에 할당된 핸들러 동작
✔️ 거의 모든 이벤트는 버블링됨 예외: `focus`
document객체를 만날 때까지,onclick핸들러 동작
event.target
- 이벤트가 정확히 어디서 발생했는지 자세한 정보 얻기 가능
- 핸들러는
form.onclick하나밖에 없지만 이 핸들러에서 폼 안의 모든 요소에서 발생하는 클릭 이벤트를 ‘잡아냄(catch)’
→ 클릭 이벤트가 어디서 발생했든 상관없이 <form> 요소까지 이벤트가 버블링 되어 핸들러를 실행시키기 때문
💡 `event.target`은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않습니다.
form.onclick핸들러 내의this와event.target의 차이
this(event.currentTarget) –<form>요소에 있는 핸들러가 동작했기 때문에<form>요소를 가리킴event.target– 폼 안쪽에 실제 클릭한 요소를 가리킴.
this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.
버블링 중단하기
- 이벤트 버블링은 타깃 이벤트에서 시작해서 요소를 거쳐 document를 만날때까지 노드에서 모두 발생 → 모든 핸들러 호출
- 핸들러에게 버블링 중단 명령 =
event.stopPropagation()
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>event.stopPropagation()
- 위쪽으로 일어나는 버블링은 막아주지만 다른 핸들러들이 동작하는건 막지 못함
- 버블링을 멈추고! 요소에 할당된 다른 핸들러의 동작도 막고싶다
→ event.stopImmediatePropagation()
