모던 자바스크립트 Deep Dive (40장 ~ 41장)

🔰이벤트

이벤트 드리븐 프로그래밍

프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다.

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.

이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러, 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 사용자가 언제 함수를 호출할지 알 수 없으므로 개발자가 호출하지 않고 브라우저에게 함수 호출을 위임한다.

이벤트 타입

이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 약 200여 가지가 있다.

focusin, focusout 이벤트 핸들러를 이벤트 핸들러 프로퍼티 방식으로 등록하면 크롬, 사파리에서 정상 동작하지 않는다. addEventListener 메서드 방식을 사용해야 한다.

마우스 이벤트, 키보드 이벤트, 포커스 이벤트, 폼 이벤트, 값 변경 이벤트, DOM 뮤테이션 이벤트, 뷰 이벤트, 리소스 이벤트 등이 있다.

이벤트 핸들러 등록

이벤트가 발생하면 브라우저에 의해 이벤트 핸들러가 호출된다. 이벤트 핸들러를 등록하는 방법은 3가지가 있다.

이벤트 핸들러 어트리뷰트 방식	이벤트 핸들러 프로퍼티 방식	addEventListener 메서드 방식
HTMl 요소의 어트리뷰트 중 이벤트 핸들러 어트리뷰트를 사용한다. 이벤트 핸들러 어트리뷰트 이름은 on 접두사와 이벤트 타입으로 이루어져 있다. 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록된다. 이 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다. 함수 참조를 할당하지 않는 이유는 이벤트 핸들러에 인자를 전달하기 위해서다. JS와 HTML의 관심사를 분리하기 위해 더는 사용하지 않는 것이 좋다. 하지만 모던 자바스크립트 프레임워크/라이브러리에서는 CBD(Component Based Development)에 기반하므로 이 방식을 사용하는 경우가 있다.	DOM  노드 객체는 이벤트 핸들러 프로퍼티를 가지고 있다. 프로퍼티 키는 on 접두사와 이벤트 타입으로 이루어져 있다. 값으로 함수를 바인딩하면 이벤트 핸들러가 등록된다. 이벤트를 발생시킬 객체인 이벤트 타깃과 이벤트 타입, 이벤트 핸들러가 필요하다. 하나의 이벤트에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.	EventTarget.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록한다. 매개변수로 이벤트 타입과 이벤트 핸들러를 전달한다. 선택 매개변수로 이벤트를 캐치할 이벤트 전파 단계를 지정할 수 있다. 생략하거나 false면 버블링 단계, true면 캡처링 단계에서 캐치한다. 이벤트 핸들러 프로퍼티에 바인딩된 이벤트 핸들러에 아무런 영향을 주지 않는다. 하나의 이벤트에 하나 이상의 이벤트 핸들러를 등록할 수 있다. 등록된 순서대로 호출된다. 단, 참조가 동일한 이벤트 핸들러를 중복 등록하면 하나만 등록된다.

이벤트 핸들러 제거

EvetTarget.prototype.removeEventListener 메서드를 사용한다.

addEventListener 메서드에 전달한 인자와 완전히 동일해야 제거된다. 따라서 무명 함수를 이벤트 핸들러로 등록한 경우 제거할 수 없다. 단, 기명 이벤트 핸들러 내부에서 removeEventListener를 호출하여 제거할 순 있다. 이때 단 한 번만 호출된다.

이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListener 메서드로 제거할 수 없다. null을 할당하여 제거한다.

이벤트 객체

이벤트가 발생하면 이벤트 객체가 생성자 함수에 의해 동적으로 생성되고, 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인자로 전달된다. 브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인자로 전달한다.

이벤트 핸들러 어트리뷰트 방식으로 등록했다면 매개변수 이름이 반드시 event여야 한다.

이벤트 객체 중 일부는 사용자에 의해, 일부는 자바스크립트 코드에 의해 인위적으로 생성된다.

생성된 이벤트 객체들은 상속 구조를 갖는다. Event 인터페이스는 DOM 내에서 발생한 이벤트에 의해 생성되는 이벤트 객체를 나타낸다. 이 인터페이스에는 모든 이벤트 객체의 공통 프로퍼티가 정의되어 있고, 하위 인터페이스에는 이벤트 타입에 따른 고유 프로퍼티가 정의되어 있다.

이벤트 객체의 공통 프로퍼티에는 type, target, currentTarget, eventPhase, bubbles, cancelable, defaultPrevented, isTrusted, timeStamp가 있다.

이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 이벤트가 발생하여 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다. 이를 이벤트 전파(event propagation)라 한다.

• 캡처링 단계(capturing phase): 이벤트 객체가 window(상위 요소)에서 시작해서 이벤트 타깃(하위 요소) 방향으로 전파된다.
• 타깃 단계(target phase): 이벤트 객체가 이벤트 타깃에 도달한다.
• 버블링 단계(bubbling phase): 이벤트 객체가 이벤트 타깃(하위 요소)에서 window(상위 요소) 방향으로 전파된다.

이벤트 핸들러 어트리뷰트 또는 프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있다. 그러나 addEventListener 메서드 방식으로 등록한 이벤트 핸들러는 캡처링 단계의 이벤트도 선별적으로 캐치할 수 있다.

이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다. 즉, 이벤트 패스에 위치한 모든 DOM 요소에서 캐치할 수 있다.

🍎 이벤트 패스(event path)
이벤트가 통과하는 DOM 트리 상의 경로로, Event.prototype.composedPath 메서드로 확인할 수 있다.

이벤트 위임

이벤트 위임(event delegation)은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다.

이벤트 위임을 사용하면 여러 개의 하위 DOM 요소에 이벤트 핸들러를 등록할 필요가 없으므로 성능 향상에 도움이 된다. 또한 동적으로 하위 DOM 요소를 추가해도 일일이 이벤트 핸들러를 등록할 필요가 없다.

이벤트 위임을 사용할 때 주의할 점은 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트 객체의 target 프로퍼티와 currentTarget 프로퍼티가 서로 다른 DOM 요소를 가리킬 수 있다는 것이다. 즉, 실제로 이벤트를 발생시킨 DOM 요소와 이벤트 핸들러가 바인딩된 DOM 요소가 다를 수 있다.

DOM 요소의 기본 동작 조작

이벤트 객체의 preventDefault 메서드는 DOM 요소의 기본 동작을 중단시킨다.

이벤트 객체의 stopPropagation 메서드는 이벤트 전파를 중지시킨다.

이벤트 핸들러 내부의 this

이벤트 핸들러 어트리뷰트 값으로 지정한 문자열은 암묵적으로 생성되는 이벤트 핸들러의 바디이므로 문자열의 함수는 일반 함수로 호출된다. 따라서 함수 내부의 this는 전역 객체를 가리킨다. 단, 문자열 내의 this는 이벤트 핸들러 내부이므로 이벤트를 바인딩한 DOM 요소를 가리킨다.

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다. 즉, 이벤트 객체의 currentTarget 프로퍼티와 같다. this를 바꾸고 싶을때는 bind 메서드를 사용하거나 화살표 함수를 활용한다.

이벤트 핸들러에 인수 전달

이벤트 핸들러 내부에서 함수를 호출하면서 인자를 전달하거나 이벤트 핸들러를 반환하는 함수를 호출하면서 인자를 전달할 수도 있다.

커스텀 이벤트

개발자의 의도로 생성된 이벤트를 커스텀 이벤트라 한다.

이벤트가 발생하면 암묵적으로 생성되는 이벤트 개게는 발생한 이벤트의 종류에 따라 이벤트 타입이 결정된다. 하지만 이벤트 생성자 함수를 호출하여 명시적으로 생성한 이벤트 객체는 임의의 이벤트 타입을 지정할 수 있다.

이벤트 생성자 함수는 첫 번째 인자로 이벤트 타입을 전달받는다. 기존 이벤트 타입을 사용해도, 임의의 문자열을 사용해도 된다. 후자의 경우 일반적으로 CustomEvent 이벤트 생성자 함수를 사용한다.

커스텀 이벤트 객체는 버블링되지 않으며 preventDefault 메서드로 취소할 수 없다. 즉, bubbles와 cancelable 프로퍼티 값이 false로 기본 설정된다. 이를 수정하려면 이벤트 생성자 함수의 두 번째 인자로 객체를 전달한다.

두 번째 인자로 여러 프로퍼티를 커스텀할 수 있다.

이벤트 생성자 함수로 생성한 커스텀 이벤트는 isTrusted 프로퍼티 값이 언제나 false다.

생성된 커스텀 이벤트는 dispatchEvent 메서드로 이벤트를 발생시킬 수 있다. 메서드에 이벤트 객체를 인자로 전달하고 호출하면 해당 이벤트가 발생한다. dispatchEvent 메서드는 이벤트 핸들러를 동기적으로 호출한다. 따라서 먼저 이벤트 핸들러를 등록해야 한다.

기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 반드시 addEventListener 메서드 방식을 사용해야 한다. 이벤트 핸들러 어트리뷰트/프로퍼티가 요소 노드에 존재하지 않기 때문이다.

🔰타이머

호출 스케줄링

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링(scheduling a call)이라 한다.

타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아닌 호스트 객체다.

타이머 함수인 setTimeout과 setInterval은 호출되면 타이머를 생성하고 생성한 타이머가 만료되면 콜백 함수가 호출된다.

setTimeout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작한다.

비동기 처리 방식으로 동작한다.

타이머 함수

함수	설명
setTimeout(func|code[, delay, param1, param2, ...])	두 번째 인자로 전달받은 시간만큼 동작하는 타이머를 생성하고 타이머가 만료되면 첫 번째 인자로 전달받은 콜백 함수가 호출된다. 생성된 타이머를 식별하는 타이머 id를 반환한다. 브라우저 환경인 경우 숫자, Node.js 환경에선 객체를 반환한다. delay를 전달하지 않으면 기본값 0이 지정된다. 4ms 이하인 경우 가 아닌 최소 지연 시간 4ms가 지정된다. 자바스크립트 비동기 처리 방식에 의해 delay는 콜백 함수가 호출되는 시간이 아닌 태스크 큐에 등록되는 시간을 의미한다. 콜백 함수에 전달해야 하는 인자가 존재하는 경우 세 번째 이후의 인자로 전달할 수 있다.
clearTimeout	인자로 setTimeout 함수가 반환한 타이머 id를 전달하면 해당 타이머가 취소된다. 즉, 호출 스케줄링을 취소한다.
setInterval(func|code[, delay, param1, param2, ...])	두 번째 인자로 전달받은 시간으로 반복 동작하는 타이머를 생성하고 타이머가 만료될 때마다 첫 번째 인자로 전달받은 콜백 함수가 반복 호출된다. 이는 타이머가 취소될 때까지 계속된다. 그 외 동작은 setTimeout과 동일하다.
clearInterval	인자로 setInterval 함수가 반환한 타이머 id를 전달하면 해당 타이머가 취소된다. 즉, 호출 스케줄링을 취소한다.

디바운스와 스로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트(scroll, resize, input, mousemove 등)와 바인딩된 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.

디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

디바운스(debounce)	스로틀(throttle)
짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 후 이벤트 핸들러가 한 번만 호출되도록 한다. 일정 시간보다 짧은 간격으로 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정한다. 일정 시간 동안 이벤트가 더 이상 발생하지 않으면 한 번만 호출된다. resize 이벤트 처리, input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등에 유용하게 사용된다.	짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 즉, 호출 주기를 만든다. 일정 시간이 경과하기 전에 이벤트가 발생하면 아무것도 하지 않다가 일정 시간이 경과했을 때 이벤트가 발생하면 호출하고 새로운 타이머를 재설정한다. 따라서 일정 시간 간격으로 함수가 호출된다. scroll 이벤트 처리나 무한 스크롤 UI 구현 등에 유용하게 사용된다.