브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.
이제는 Node.js로인해 서버 사이드 언어로도 자기매김 하였지만 과거에는 인터랙티브 한 웹 애플리케이션을 표현하기 위해 많이 사용되었고 사용자와 상호작용하기 위해서 이벤트를 많이 사용했다.
우리는 특정 타입에 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.
이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이베트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다.
이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 이러한 이벤트 타입은 약 200여 가지가 있다.
- 마우스 이벤트
- 키보드 이벤트
- 포커스 이벤트
- focusin, focusout 이벤트 핸들러를 이벤트 핸들러 프로퍼티 방식으로 등록하면 크롬, 사파리에서 정상 독작하지 않는다. 이 이벤트는 addEventListener 메서드 방식을 사용해 등록해야 한다. - 폼 이벤트
- 값 변경 이벤트
- change 이벤트는 input 이벤트와는 달리 HTML 요소가 포커스를 잃었을 때 사용자 입력이 종료되었다고 인식하여 발생한다. 즉 입력 시에는 input이벤트가 발생하고 입력이 종료되어 값이 변경되면 change 이벤트가 발생한다.
- readyStatechange 이벤트는 HTML 문서의 로드와 파싱 상태를 나타내는 document.readyState 프로퍼티 값이 변경될 때 발생한다. - DOM 뮤테이션 이벤트
- DOMContentLoaded 이벤트는 HTML 문서의 로드와 파싱이 완료되어 (여기서 파싱은 렌더 트리인가?) DOM 생성이 완료되었을 때 (DOM 생성이 완료되었을 때니 실제 렌더 트리가 생성되기 전인 것 같다.) - 뷰 이벤트
- 리소스 이벤트
- 리소스(이미지, 폰트)가 로딩이 완료되거나, 언로드, 중단, 실패 시에도 이벤트가 발생할 수 있다.
이벤트 핸들러는 브라우저에게 호출을 위임한 함수를 뜻한다. 이벤트 핸들러를 등록하는 3가지 방법을 알아보자.
1. 이벤트 핸들러 어트리뷰트 방식
HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.
이벤트 핸들러 어트리뷰트의 이름은 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.
즉 HTML 요소의 이벤트 핸들러 어트리뷰트 값으로 문(statement)을 할당하면 이벤트 핸들러가 등록된다.
<button onclick="sayHi('OnceRun')">click</button>
<script>
function sayHi(name){
console.log(name);
}
</script>
중요하게 보아야 하는 점은 함수 참조가 아닌 함수 호출 문 등의 문을 할당한다는 것이다.
이벤트 핸들러 등록은 함수 호출을 브라우저에게 위임하는 것이다. 따라서 이벤트 핸들러를 등록할 때 콜백 함수와 마찬가지로 함수 참조를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있다.
만약 함수 참조가 아닌 함수 호출 문을 등록하면 함수 호출문의 평가결과가 이벤트 핸들러로 등록된다
함수를 반환하는 고차 함수 호출문을 이벤트 핸들러로 등록한다면 문제가 없겠지만 값을 반환하는 함수 호출문을 이벤트 핸들러로 등록하면 브라우저가 이벤트 핸들러를 호출할 수 없다.
하지만 위 코드에서는 이벤트 핸들러 어트리뷰트 값으로 함수 호출문을 할당했다. 이때 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다. 그리고 이벤트 핸들러 어트리뷰트 이름과 동일한 키 onclick 이벤트 핸들러 프로퍼티에 할당한다.
function onclick(event) {
sayHi('OnceRun');
}
결국 onclick에 들어가는 코드는 함수 몸체에 들어가기 때문에 여러 개의 문을 할당할 수도 있다.
과거 프로젝트의 코드를 보면 함수 호출 문이 여러 개 들어있는 것을 본 적이 있는 것 같다.
다만 더는 사용하지 않는 것이 좋은데 그 이유는 HTML과 자바스크립트는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋다.
다만 CBD 방식의 프레임워크/라이브러리에서는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다. CBD에서는 HTML, CSS, 자바스크립트를 관심사가 다른 개별적인 요소가 아닌, 뷰를 구성하기 위한 요소로 보기 때문에 관심사가 다르다고 생각하지 않는다.
2. 이벤트 핸들러 프로퍼티 방식
window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다. 따라서 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
<button>click</button>
<script>
const $button = document.querySelector('button');
$button.onClick = function (){
console.log('click');
};
</script>
이벤트 핸들러를 등록하기 위해서는 이벤트를 발생시킬 객체인 이벤트 타깃과 이벤트의 종류를 나타내는 문자열인 이벤트 타입, 그리고 이벤트 핸들러를 지정해야 한다.
이벤트 핸들러는 대부분 이벤트를 발생시킬 타깃에 바인딩된다. 하지만 반드시 이벤트 타겟에 이벤트 핸들러를 바인딩해야 하는 것은 아닌데, 이벤트 핸들러는 이벤트 타겟 또는 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩한다.
앞에서 살펴본 이벤트 핸들러 어트리뷰트 방식도 결국 DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환되므로 결과적으로 이벤트 핸들러 프로퍼티 방식과 동일하다고 할 수 있다.
이 방식은 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있다. 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.
만약 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하려면 이벤트 핸들러 프로퍼티에 null을 할당한다.
3. addEventListener 메서드 방식
DOM Level 2에서 도입된 EventTarget.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있다. 나도 이방식으로 공부했던 기억이 난다.
앞에서 본 이벤트 핸들러 어트리뷰트 방식과 프로퍼티 방식은 DOM Level 0부터 제공되던 방식이다.
| EventTarget | addEventListener | eventType | functionName | useCapture |
| 이벤트 타깃 | 이벤트 타입 | 이벤트핸들러 | capture 사용여부 |
첫 번째 매개변수에는 이벤트의 종류를 나타내는 이벤트 타입을 전달한다. 이때 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않는다.
두 번째 매개변수에는 이벤트 핸들러를 전달한다.
마지막 매개변수에는 이벤트를 캐치할 이벤트 전파 단계(캡처링, 버블링)를 지정한다. 생략하거나 false를 지정하면 버블링 단계에서 이벤트를 캐치하고, true를 지정하면 캡처링 단계에서 이벤트를 캐치한다.
<button>click</button>
<script>
const $button = document.querySelector('button');
$button.addEventListener('click' function () {
console.log('hi');
});
</script>
addEventListener 메서드는 하나 이상의 이벤트 핸들러를 등록할 수 있다. 이때 이벤트 핸들러는 등록된 순서대로 호출된다.
이벤트 핸들러 제거에는 EventTaget.prototype.removeEventListener 메서드를 사용하는데 addEventListener 메서드에 전달한 인수와 removeEventListener 메서드에 전달한 인수가 일치하지 않으면 이벤트 핸들러가 제거되지 않는다.
또한 무명 함수를 이벤트 핸들러로 등록한 경우에는 제거할 수 없다. 그렇기에 이벤트 핸들러를 제거하려면
이벤트 핸들러의 참조를 변수나 자료구조에 저장하고 있어야 한다.
단 기명 이벤트 핸들러 내부에서 removeEventListener 메서드를 호출하여 이벤트 핸들러를 제거하는 것은 가능하다.
$button.addEventListener('click' function foo(){
console.log('hi');
//단 한번만 실행된다.
$button.removeEventListener('click', foo);
//$button.removeEventListener('click', arguments.callee);
});
댓글