널 위해 준비한 이벤트야, 어서 일해

김재만·2022년 4월 18일

이벤트란

이벤트는 프로그래밍한 시스템에서 일어나는 사건을 의미한다. 브라우저가 이벤트(유저가 조작한 특정 동작)를 감지하고, 이를 자바스크립트에서 접근하여 상호작용한다. 웹의 이벤트는 브라우저 윈도우 내에서 발생한다.

이벤트의 예시

유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둡니다(hover).
유저가 키보드에서 키를 선택합니다.
유저가 브라우저 창의 크기를 재조정하거나 닫습니다.
웹 페이지가 로딩을 완료했습니다.
양식(form)이 제출되었습니다.
비디오가 재생되거나, 멈추거나, 혹은 끝났습니다.
오류가 발생했습니다.

이벤트 핸들러와 이벤트 등록

이벤트 핸들러란 이벤트가 발생되면 실행되는 코드블럭으로, 자바스크립트가 아닌 브라우저에 내장된 API의 일부다. 종종 이벤트 리스너라고도 부른다. 일반적으로 브라우저 상 특정 요소의 이벤트에 응답하여 코드블럭이 실행되도록 정의하는 작업을 이벤트 핸들러 등록이라고 한다.

이벤트를 등록하는 방법은 크게 세 가지가 있다.
1. HTML 요소의 속성을 활용한다. ex) onclick, onsubmit, onended, ...
2. DOM 요소의 프로퍼티로 등록 ex) window.onload, document.getElementById한 값에 .onclick 할당, ...
3. addEventListener 메소드로 등록

target.addEventListener(type, listener, useCapture)
- target은 이벤트 핸들러를 등록할 요소
- type은 감지할 이벤트의 종류
- listener는 실행할 코드블럭
- useCapture는 캡처링할지 여부 true or false

이벤트 버블링과 캡쳐링

이벤트 버블링

HTML에서는 일반적으로 부모요소가 자식요소를 포함한다. 사람으로 치면 손가락은 손에 포함되어있고, 손은 팔의 일부로 볼 수 있다. 외부에서 발생하는 이벤트에 대해서 각각 반응한다. 손가락에 뜨거운 것이 다으면, 손가락을 구부리는 동작과 손목을 반대로 꺾는 동작과 팔꿈치를 접는 동작이 일어난다.

인체는 이 세 가지를 거의 동시에 처리할 수 있지만, 브라우저에게는 쉽지 않은 동작이다.때문에 자식요소와 부모요소에 같은 이벤트에 대한 핸들러가 등록되어 있는 경우 해당 이벤트를 처리할 순서가 정의될 필요가 있다.

이벤트 버블링이란 자식요소부터 실행될 이벤트 핸들러가 있는지 확인하고(있으면 실행), 점차 상위 요소로 전달되어 이벤트 핸들러를 확인하는 특성과 동작을 의미한다. 만약 사람의 몸에 이벤트 버블링이 적용된다면, 반드시 손가락 먼저 구부리고 손목을 꺾은 뒤에야 팔꿈치를 접기 시작하게 된다. 상위 요소 중에 이벤트 핸들러가 적용되어 있지 않은 요소가 있더라도, 버블링은 최상위 요소(html)까지 이어진다.

이벤트 캡쳐링

캡처링은 버블링의 반대로 최상위 요소에서 이벤트 핸들러를 확인하여 실행하고, 하위 요소로 전달하여 실제로 이벤트가 동작한 요소까지 전달되는 것을 의미한다. 위의 addEventListener의 경우 세 번째 인자로, useCapture로 적용할 지 물어본 바 있다.

이벤트 버블링과 캡쳐링에 대하여

현대 브라우저들이 지원하는 모든 이벤트 핸들러의 기본값은 이벤트 버블링이다.
이벤트 버블링과 캡쳐링이 모두 존재하는 경우 캡처링 단계가 먼저 실행되고, 버블링이 일어난다.
버블링과 캡처링은 각각 Internet Explorer와 Netscape의 이벤트 특성이다. 현대 브라우저가 둘 다를 지원하는 이유는 물론 레거시 브라우저에서의 동작을 유지하기 위함이지만, 거슬러 올라가면 둘 다 시스템으로 채용한 W3C의 결정에서 비롯된다.
이벤트 핸들링을 지원하지 않는다면, 해당 이벤트를 감지하는 요소의 하위 요소들은 이벤트를 방해하는 골치덩이로 작용할 것이다.

이벤트 전파 차단하기

이벤트 핸들러에는 해당 이벤트에 대한 정보를 담고있는 매개변수인이벤트 객체가 있다. 해당 이벤트 객체의 메소드 중에는 stopPropagation()이 있는데, 해당 메소드는 첫 핸들러가 실행 된 이후 이벤트가 더 이상 전파되지 않도록 설정한다.

이벤트 위임

이벤트 위임은 모든 하위요소에서 발생한 이벤트가 상위요소로 모인다는 점을 활용한 기법이다. 자식 요소에 각각 이벤트 핸들러를 등록하는 대신, 적절한 상위요소를 선정해서 이벤트 핸들러를 등록하는 것이다. 물론 각 이벤트에 대해 판단하는 코드를 추가해야 하지만, 동적으로 추가될 때 이벤트 리스너가 작동하지 못하는 것을 방지하고, 이벤트 리스너의 남발로 인한 메모리 낭비를 줄인다.