개요
브라우저는 처리해야 할 특정 사건을 감지하여 이벤트를 발생시킬 수 있다. 이때 호출되야 할 함수를 이벤트 헨들러 라고 한다
개발자 입장에선 함수가 언제 호출되야할지 알 수 없으므로, 마치 aws의 람다에게 함수호출을 위임하는것처럼 브라우저에게 이벤트에 대하여 함수호출을 맡길 수 있다. 이를 이벤트 위임 이라고 한다.
const button = document.querySelector(".button");
button.onclick = () => { console.log("clicked") }위와 같이, 개발자는 DOM상의 노드들이 가지고 있는 다양한 이벤트 헨들러 프로퍼티에 대해 함수를 등록할 수 있다.
브라우저는 이벤트가 발생할 때 개발자 대신 함수호출을 위임받아서 대신 실행시키게 된다.
위와같이 이벤트를 중심으로 프로그램 흐름을 제어하는 것을 이벤트 드리븐 프로그래밍 이라고 한다
이벤트 헨들러 방식
헨들러를 등록하는 방식은 크게 3가지가 있다
1. attribute 방식
= 호출문을 등록하는 방식이다.
= 해당 호출문은 암묵적으로 생기게 되는 함수의 몸체에서 호출되는 부분에 해당한다.
= 구식 브라우저에서 보이는 패턴이므로 알아두기만 하면 좋다.
= CBD (component based development) 에서는 javascript 역시 뷰를 구성하기 위한 요소중 하나로 보기때문에 관심사를 통합하는 의미로
attribute의 철학을 채택하고 있다 ( ex React, Angular. 단 호출방식은 순수 attribute와는 조금 다름 )
<button onclick="clickFunction()"> this is button </button>
// 은
// function onclick(event) { clickFunction() } 와 같다.2. property 방식
= DOM의 노드객체에는 이벤트에 대응하는 핸들러 프로퍼티가 존재하므로, 핸들로 프로퍼티에 함수를 바인딩하는 방식이다
= 본질적으로는 Attribute 방식 역시 노드객체로 변환될 때 프로퍼티에 해당사항이 적용되므로 property 형식과 같다
= 하지만, property 형식은 관심사 입장에서 이벤트 핸들러의 적용을 분리한다는 점에서 차이를 보인다
const button = document.querySelector(".button");
button.onclick = () => { console.log("clicked") }3. addEventListener 방식
= 이벤트가 발생한 타겟노드객체에 존재하는 메서드 addEventListener을 사용하는 방식이다
구조
EventTarget.addEventListener("event type", handler, [, options]);
option 부문에는 에를들어, capture : true 와 같이 전파와 관련된 값을 설정해줄 수 있다.
= addEventListener은 attribute, property 타입과 별개로 호출이된다. ( 즉, 둘 다 등록하면 둘 다 실행된다 )
= addEventListener은 동일한 이벤트에 대해 여러번 호출되어 핸들러를 등록할 수 있다 ( 이때엔 등록된 순으로 실행된다 )
= removeEventListener(인자들)을 통해 등록을 해제할 수 있다. 이때 인자들이 모두 일치해야 타겟 이벤트 등록이 해지된다.
이벤트 버블링과 z-index
일반적으로, position과 z-index를 통해 영역이 겹쳐지게 되는 경우 z-index가 높은 영역의 이벤트만 발생한다
(마치 레이어처럼, 다른 요소들은 덮어지는 상태)
그런데 만약 아래에 놓여진 이벤트가 발생하길 원할 경우, css적으로 이를 처리할 수 있다
z-index: 10000;
pointer-events: none; 위 옵션을 설정하게 된다면 레이어적으로는 최상단에 위치하게 되지만 해당 요소의 이벤트는 발생하지 않고 후순위에 있는 요소들에서 이벤트를 발생시키게 된다.
