컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다. 그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다. 실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다. 우선 가장 간단하게 알 수 있는 이벤트 위임(event delegation)을 통해 알아보자. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 위와 같은 코드가 있다고 생각해보자. 만약 5개의 버튼에 기능을 준다고 생각해보자. 기존 방법을 쓰면 다음과 같이 해야한다. 1번 버튼 2번 버튼 3번 버튼 4번 버튼 5번 버튼 div 밖의 버튼 5개의 버튼을 이용하려면 5개의 객체를 만들고 일일이 이벤트 리스너 메서드를 지정해줘야 했다. 하지만 이벤트 캡쳐링을 이용하면 이를 쉽게 극복할 수 있다. 1번 버튼 2번 ..

자바스크립트에서 이벤트를 실행하면 버블링과 캡쳐링이란 것을 발생하게 할 수 있다. 간단하게 말하자면 이벤트가 발생 시 HTML 문서 구조상 이벤트가 다른 문서로 전이되는 것을 말한다. 코드를 살펴보자. 1. 캡쳐링과 버블링 캡쳐링과 버블링 위 코드를 살펴보자. 대략 그림으로 위 HTML문서의 구조를 나타내면 다음과 같다. 이때 여기서 버튼을 누르면 어떤 결과가 나올까? 다음과 같은 결과가 나온다. 버튼은 한번만 눌렀는데 결과값은 4개가 나온 것이다. HTML 문서의 각 노드들은 어딘가 종속되어있는 계층적 구조로 이뤄진다. 그래서 어느 한 곳에서 이벤트가 발생하면 다른 곳으로 이벤트가 전파된다. 그리고 이때 이 이벤트가 전파되는 방향에 따라 이것을 캡쳐링과 버블링이라고 부르는 것이다. 둘은 구분하면 다음과..