Today
오늘부터 팀 과제를 시작하게 되었다. 총 2개의 팀 과제인데 레이아웃만 잡아두고 내일부터 각자 맡은 부분을 작업하고 화요일에 합쳐보기로 했다 나는 심박수 그래프를 구현하기로 했는데, 이번에도 victoryjs를 사용해야할 것 같다.
이벤트 버블링
- 이벤트 버블링은 한 요소에 이벤트가 발생하면
요소에 할당된 핸들러가 동작 => 부모 요소의 핸들러 동작 => 최상단 부모 요소까지 반복
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
해당 구조로 짜여져 있다고 가정했을때 div태그에 클릭 이벤트를 주고 classname을 console로 출력하도록 하면
three
two
one
출력이 된다. 모두 클릭 이벤트가 있지만 한개의 div만 클릭해도 세개전부 이벤트가 동작하게 되는데 브라우저가 이벤트를 감지하는 방식 때문이라고 한다.
브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소 까지 이벤트를 전파시킨다. 그렇기 때문에 <div class="three"/>로 지정한 클래스 이름부터 최상위 <div class="one"/>까지 순차적으로 뜨는 것이다.
하위부터 상위 요소까지 이벤트를 전파하는 방식을 이벤트 버블링이라고한다.
이벤트 캡쳐링
이벤트 캡쳐링은 이벤트 버블링과 반대 방향으로 이벤트를 전파하는 방식이다.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>
같은 예제코드로 살펴보자면 클릭 이벤트에 capture: true를 추가하게되면
one
two
three
버블링과 다르게 상위 요소에서 하위 요소로 이벤트가 전달된다.
INFP🖐