이벤트
이벤트란? 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)이다.
그럼 웹 개발에서 이벤트란 무엇일까? 🤔
- 웹 브라우저에서 발생하는 사건
- 요소를 클릭했을 때
- 키를 입력했을 때
- 브라우저 창의 크기를 늘리거나 줄일 때
- 웹 페이지가 로딩을 마쳤을 때
- …
이벤트 핸들러
- 이벤트가 발생됐을 때 해당 이벤트에 응답하기 위해 실행되는 함수를 핸들러라고 한다.
- HTML 요소의
on<Event>속성이나addEventListner()메서드로 요소에 핸들러를 할당할 수 있다.
이벤트 버블링
이벤트 버블링은 특정 요소에서 이벤트가 발생하는 경우 해당 이벤트가 더 상위 요소들로 전달되는 특성을 의미한다.
제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 물속 거품과 닮았기 때문에 이벤트 버블링이라고 부른다.
가장 안쪽의 <p> 태그를 클릭하면 어떤 일이 발생할까?
<p>에 할당된onclick핸들러가 동작한다.
- 바깥의
<div>에 할당된 핸들러가 동작한다.
- 그 바깥의
<form>에 할당된 핸들러가 동작한다.
document객체를 만날 때까지, 각 요소에 할당된onclick핸들러가 동작한다.
즉, 한 요소에 이벤트가 발생하면, 요소에 할당된 핸들러가 동작하고 가장 최상단의 요소를 만날 때 까지 부모 요소의 핸들러가 동작한다.
버블링 중단하기
이벤트 객체의 메서드인
stopPropagation() 로 버블링을 중단할 수 있다.버블링 중단 지양하기
버블링 중단을 많은 곳에서 권장하지 않는다. 왜일까?
아래 코드는 Ruby 앱에서 부트스트랩을 사용하는 예이다. 드롭다운 메뉴는 document의 클릭 이벤트를 통해 닫히게 된다. Remote Link에는 이벤트 버블링을 막게끔 구현이 되어있으므로 부트스트랩 코드가 정상적으로 작동하지 않는다.
DOM 이벤트는 전역적이고, 전역 변수는 복잡하고 결합된 코드로 이어질 수 있다. 다른 코드가 의존하는 동작을 변경하면 버그가 생길 수 있기 때문에 최대한 지양하는 것이 좋다.
버블링은 왜 발생하는 걸까
이벤트가 발생하면, 브라우저는 이벤트 발생 의도를 알지 못하기 때문에, '사용자가 클릭하려고 의도한게 뭐지? 이건가? 이건가?' 하면서 중첩된 요소들의 이벤트가 있다면 전부 다 수행해보기 때문이다.
버블링은 의도하지 않은 동작을 일으킬 수 있어 불편할 수 있지만, 이런 특성을 이용해 상위 요소 하나에만 이벤트 핸들러를 등록하여 이벤트 위임으로 다른 요소의 이벤트 까지 모두 처리할 수 있다는 장점이 있다.
