버블링과 캡처링

<div onclick="alert('div에 할당한 핸들러!')">
  <em>
    <code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가
    동작합니다.
  </em>
</div>;

버블링

특정 요소에사 발생한 이벤트가 부모 요소로 올라가는 것을 말한다.

<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 → div → form 순서로 3개의 얼럿 창이 뜬다.

거의 모든 이벤트는 버블링이 일어난다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있긴 있다.

event.target

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.

event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있습니다.