한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모요소의 핸들러가 동작함 가장 최상단의 요소를 만날때까지 이 과정은 반복되며 요소 각각에 한당된 핸들러가 동작한다.
<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>
태그를 클릭하면 일어나는일1.<p>
에 할당된 onClick
핸들러가 동작한다.
2. 바깥의 <div>
에 할당된 핸들러가 동작한다.
3. 그 바깥의 <form>
에 할당된 핸들러가 동작합니다.
4. document
객체를 만날 때까지, 각 요소에 할당된 onclick
핸들러가 동작합니다.
이런 동작 방식 떄문에<p>
요소 클릭시 <p>
-><div>
-><form>
순서대로 3개의 alert창이 뜬다.
-> 이런 흐름을 이벤트 버블링이라고 한다. 이벤트가 가장 깊은 곳에 있는 요소에서 시작해서 부모요소를 거슬로 올라가는 모습이 마치 물속 거품과 닮았기 때문
❗️거의 모든 이벤트는 버블링 된다.
거의 다 된다. 거의
focus 이벤트와 같이 버블링 되지 않는 이벤트도 있음
부모 요소의 핸들러는 이벤트가 정확히 발생했는지 등에 대한 자세한 정보를 얻을 수 있다.
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.
핸들러는 form.onclick 하나밖에 없지만 이 핸들러에서 폼 안의 모든 요소에서 발생하는 클릭 이벤트를 ‘잡아내고(catch)’ 있습니다. 클릭 이벤트가 어디서 발생했든 상관없이
요소까지 이벤트가 버블링 되어 핸들러를 실행시키기 때문입니다.form.onclick 핸들러 내의 this와 event.target은 다음과 같습니다.
this(event.currentTarget) – 요소에 있는 핸들러가 동작했기 때문에 요소를 가리킵니다.
event.target – 폼 안쪽에
부모 element에서 발생된 event가 자식 element순으로 전달 되는 현상