서론
js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다.
이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자.
Event Bubbling, Capturing
<html>
<body>
<table>
<tbody>
<tr>
<td>클릭해주세요.</td>
</tr>
</tbody>
</table>
</body>
</html>다음과 같은 html이 있을 경우에, 밑과 같이 event가 일어난다.
출처
-
우선 Event Capturing이라는 것이 일어나는데, 최상단 요소에서 클릭한 요소로 찾아가는 과정을 의미합니다. 이 과정에서, 이벤트가 따로 발생된다거나 그런 것은 없습니다.
-
그 이후에, 클릭한 요소에서 이벤트가 발생합니다. 여기서 등록한 event handler가 실행됩니다.
-
그 이후에는 Event Bubbling 이 일어납니다. Event Bubbling이 일어나면 클릭한 요소에서 점점 최상위 요소로 이벤트가 전파되는데 이 때 이벤트가 전파된 요소들의 이벤트 핸들러가 작동한다.
만들고싶은걸만듭니다