Event-Driven Programming

Event-Driven Programming이란?

이벤트 응답으로 코드를 작동 시키는 패러다임으로, 자바스크립트에서는 주로 유저에 의한 응답이 있다.

대표적으로 dom에 addEventListener를 하여 해당 이벤트가 발생했을때 실행되는 콜백함수도 대표적인 Event-Driven이다.

addEventListener란?

자바스크립트에서 dom에 event listener를 붙이는 메서드이다. addEventListenr을 사용하기 위해선

element.addEventListener(eventName,callback, options) 와 같은 문법을 사용하면 된다.

option은 생략이 가능하며, 기본값은 false이다.

기본적으로 흔하게 사용되는 addEventListener은 아래와 같은 방법일 것이다.

const button = document.querySelector("button");

button.addEvenListener("click",onClick);

function onClick(event) {
	console.log('클릭됨');
}

위 처럼 코드를 짤 경우 기본적으로 이벤트 버블링이 발생하여, 자식 노드에서 부모 노드로 이벤트가 전파되는 방식이 된다.

하지만 만약 아래와 같이 3번째 인자에 true를 주게 된다면?

button.addEvenListener("click",onClick,true);

이것은 이벤트 버블링 방식이 아닌 캡쳐링 방식으로 사용하겠다는 것이다.

캡쳐링은 버블링과 반대로 부모에서부터 출발하여 자식으로 이벤트가 전파되는 것이다.

그리고 그냥 boolean 값만 할당할 수 있는 것이아니라 아래와 같이 객체형태로 옵션을 전달할 수 도 있다.

const abortController = new AbortController();

button.addEvenListener("click",onClick,{
	capture:true,
	once:true,
	passive:false,
	signal:abortController.signal
});

capture - 위에서 작성한 boolean역할과 같은 역할을한다. capturing을 할지 bubbling 방식으로 할지 정하는 것이다.

once - 만약에 이것이 true이면 이벤트는 한번만 실행이되고 알아서 remove가 된다.

passive - 만약에 이것이 true이면 브라우저에게 event.preventDefault()를 사용하지 않겠다고 말해주는 것이다. 보통 모바일 화면에서 스크롤과 같은 행동을 취할때 최적화 시키는 방법중 하나이며, 터치이벤트가 브라우저에서 발생할때 일반적으로 그 이벤트 리스너가 스크롤을 취소할지 안할지에 대한 판단을 못하므로, 리스너 실행이 끝날때까지 기다렸다가 페이지를 스크롤을 시켜준다. 하지만 passive가 true일때 브라우저에게 즉시 스크롤해도 된다고 알려주는 것이다.

singal - AbortController의 인스턴스가 들어가게되며, removeEventListener와 동일학 역할을 해준다. removeEventListener를 하고 싶은 순간에 해당 인스턴스를 가지고 abortController.abort()를 실행시켜주면 된다.

결론

아마 일반적인 addEventListener를 사용하여 이벤트를 할당하고 그에 맞는 로직을 처리하는 일들은 모든 프론트엔드개발자들이 다 할줄 아는 것일거다. 하지만 몇몇분들은 3번째 인자에 대한것을 모를 수도 있을것이다. capture에 관한건 알아도 그 안에있는 나머지 3개의 프로퍼티 역할을 모를 수도 있을 것이다.

때때로 이것은 굳이 함수를 일일이 넣어서 removeEvent를 해줄 필요도 없어 편리하며, 모바일 스크롤시 passive로 최적화도 가능하기때문에 나름 유용한 옵션들이다. 상황에 맞게 잘 사용하면 조금더 섹시한 프로그래밍이 되지 않을까 생각된다.