자바스크립트 객체와 이벤트의 기본 개념
자바스크립트는 간단한 객체 기반 패러다임을 바탕으로 설계된 언어입니다. 객체(Object)는 여러 프로퍼티(property)의 집합이며, 각 프로퍼티는 고유한 이름(name)과 값(value)으로 구성됩니다.
흥미로운 점은 프로퍼티의 값이 함수가 될 수도 있다는 것입니다. 이 경우 해당 프로퍼티를 특별히 메서드(method)라고 부릅니다.
HTML 이벤트란 무엇인가?
반면 HTML 이벤트(event)란 HTML 요소에 발생하는 여러 가지 '사건'을 의미합니다. 예를 들어 다음과 같은 상황들이 모두 이벤트에 해당합니다.
- 사용자가 버튼이나 링크 같은 HTML 요소를 클릭할 때
- 입력 필드에 키보드로 값을 입력할 때
- 페이지 로딩이 완료되거나 창 크기가 변경될 때
HTML 페이지에서 자바스크립트를 사용하면, 자바스크립트가 이러한 이벤트에 즉각적으로 '반응(react)'할 수 있습니다. 즉, 특정 이벤트가 발생했을 때 원하는 동작을 실행하도록 프로그래밍할 수 있는 것입니다.
이벤트 발생 시 자바스크립트 실행하기
이벤트가 발생하는 순간 자바스크립트 코드를 실행할 수 있습니다. 대표적인 방식은 사용자가 HTML 요소를 클릭했을 때 그에 맞는 코드를 실행하는 것으로, HTML의 이벤트 속성(attribute)에 자바스크립트 코드를 추가하면 됩니다.
<button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>위 예제처럼 onclick 속성을 활용하면 클릭 이벤트에 반응하여 지정된 코드가 실행됩니다. 다만 실무에서는 유지보수성을 위해 addEventListener() 메서드를 사용해 이벤트를 등록하는 것이 권장됩니다.
객체가 이벤트인지 확인하는 방법
그렇다면 전달받은 객체가 실제로 이벤트(Event) 객체인지 어떻게 판별할 수 있을까요? 가장 확실하고 널리 쓰이는 방법은 instanceof 연산자를 사용하는 것입니다.
element.addEventListener('click', function (e) {
console.log(e instanceof Event); // true
});instanceof는 객체가 특정 생성자의 인스턴스인지 검사하므로, 이벤트 핸들러 내부나 임의의 함수에서 받은 인수가 진짜 이벤트 객체인지 신뢰성 있게 확인할 수 있습니다.
더 견고한 코드를 원한다면, 구형 환경에서 window.Event가 존재하지 않을 가능성까지 고려할 수 있습니다.
function isEvent(obj) {
const NativeEvent = window.Event || null;
return Boolean(NativeEvent && obj instanceof NativeEvent);
}이처럼 자바스크립트의 객체 구조와 HTML 이벤트의 동작 원리를 이해하고 나면, 이벤트 객체를 정확히 판별하고 이벤트 기반의 인터랙티브한 웹 페이지를 안정적으로 구현할 수 있습니다.