어떠한 버튼이 클릭 됐을 때, 선언한 함수가 실행하도록 하는 것과 같은 것들을 우리는 이벤트라고 부른다. 이 이벤트가 동작하는 원리와 그에 따른 이벤트 버블링, 캡쳐링 그리고 이벤트 위임까지 알아보고자 한다!
이벤트 버블링
HTML의 태그들은 tree 형태로 그려진다. 이에 따라 내가 작성한 태그들은 부모와 자식 간의 관계로 이루어져 있는데, 자식 태그에 이벤트가 일어 났을 때 해당 이벤트가 부모 이벤트에도 전달 되는 것을 이벤트 버블링(자식 -> 부모) 이라고 한다.
<body>
<button class="a" >
<button class="b">
<button class="c">
</button>
</button>
</button>
</body>만약 위의 코드에서 각 button 태그에 onclick 이벤트가 3개의 태그에 각각 있는 상황이라고 가정할 때,
class 이름이 c라는 버튼을 누르면 이벤트 버블링 효과가 발생하여 각각의 상위태그인 a,b에서도 이벤트가 발생하게 된다.
즉, c만 눌러도 c -> b -> a 순서대로 이벤트가 발생한다.
이벤트 캡쳐링
이벤트 버블링과는 반대되는 개념으로 부모 -> 자식으로 이벤트가 전달되는 개념이다. 더 정확하게는 최상위 태그에서 이벤트가 일어난 태그로 이벤트가 전달된다.
<body>
<button class="a" >
<button class="b">
<button class="c">
</button>
</button>
</button>
</body>마찬가지로, 3개의 태그에 모두 클릭 이벤트가 걸려 있고 만약 class 이름이 b인 태그를 누른다면 a, b의 이벤트가 모두 실행된다.
즉, b를 눌렀는데 a -> b 순서대로 이벤트가 발생되는 것이다.
캡쳐링은 기본적으로 false로 되어 있어서 보통은 버블링이 발생되고, 캡쳐링을 true 바꿔주면 이벤트 캡쳐링이 된다.
이는, 아래와 같이 작성할 수 있다.
button.addEventListener(이벤트, 이벤트 시 실행할 함수 , true)보통은 true 자리는 비워두고 (이벤트, 이벤트 시 실행할 함수) 만 썼을텐데 비워두면 false 처리가 되어서 기본적으로 버블링이 발생하는 것이다.
버블링과 캡쳐링 막기
e.stopPropagation();이벤트가 해당 태그에서만 일어나도록 실행하고 싶다면 해당 태그의 실행할 함수에 위의 api를 호출해주면 된다.
- 버블링의 경우, 타겟 엘리먼트만 이벤트가 발생하고
- 캡쳐링의 경우, 타겟 엘리먼트의 최상단 태그에서 이벤트가 발생한다.
이벤트 위임
이벤트 위임은 버블링과 캡쳐링을 이용한 방법이다.
이를 통해 통해 동적으로 생성되는 엘리먼트의 이벤트를 관리할 수 있다.
가령, 엘리먼트가 새로 생성 되는 상황이라면 새롭게 엘리먼트가 생성될 때마다 해당 엘리먼트에 addEventListner를 작성해서 달아주어야 하는데 이벤트 위임을 이용하면 이러한 과정이 필요 없게 된다.
<body>
<ul class="a" >
</ul>
</body>이렇게 ul 태그가 있다고 했을 때, 어느 다른 곳에서 내가 작성한 텍스트가 ul 태그의 자식 태그로 생성된다고 하자.
이벤트 위임을 이용하지 않는다면 li태그가 생성될 때마다 이벤트를 실행하도록 달아주어야 한다.
하지만 이벤트 버블링을 이용해서 ul 태그에서 이벤트가 실행 되도록 만들어주면 생성될 li태그에도 이벤트가 적용될 것이다.
