- 브라우저는 클릭, 키보드 입력, 마우스 이동 등이 일어나면 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출 될 함수를 이벤트 핸들러(Event Handler)라고 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다. 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용 할 수 있다.
1. 이벤트 핸들러(Event Handler)
- 이벤트가 발생 했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 하며, 이벤트 핸들러를 등록하는 방법은 3가지다.
1-1. attribute를 활용한 이벤트 핸들러
- HTML 이벤트 핸들러 어트리뷰트 (on 접두사 + 이벤트 타입) 값으로 함수 호출문을 할당하여 이벤트 핸들러를 등록하는 방식이다.
- 주의할 점은 함수 참조가 아닌 함수 호출문을 할당한다는 것이다.
1-2. property를 활용한 이벤트 핸들러
- window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다.
- 이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 동일하며 (on 접두사 + 이벤트 타입) 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
- 이벤트 핸들러 어트리뷰트 방식과 비교했을 때 HTML과 자바스크립트가 뒤섞이는 문제는 해결할 수 있지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점이 있다.
1-3. addEventListener를 활용한 이벤트 핸들러
- EventTarget.prototype.addEventListener 메서드를 사용하여 이벤트를 등록할 수 있다.
- EventTarget.addEventListener('eventType', functionName [, useCapture])
- 첫 번째 매개변수에는 이벤트 타입, 두 번째 매개변수에는 이벤트 핸들러를 전달하고 마지막 매개변수에는 이벤트 전파 단계(캡처링 또는 버블링)을 지정한다. (추후 이벤트 전파에서 다룬다)
- addEventListener 메서드 방식은 이벤트 핸들러 프로퍼티에 바인딩 된 이벤트 핸들러에 아무런 영향을 주지 않는다.
- 동일한 HTML 요소에서 발생한 동일한 이벤트에 대해 addEventListener 메서드 방식으로는 하나 이상의 이벤트 핸들러를 등록 할 수 있으며 이 때 이벤트 핸들러는 등록 된 순서대로 호출된다.
1-4. 이벤트 핸들러 제거
- EventTarget.prototype.removeEventListener 메서드를 통해 addEventL, hanistener 메서드로 등록한 이벤트 핸들러를 제거한다.
- removeEventListener 메서드에 전달할 인수는 addEventListener 메서드와 동일하며, 전달한 인수가 일치하지 않을 경우 이벤트 핸들러는 제거되지 않는다.
2. 이벤트 객체(Event Object)
2-1. event 객체
- 이벤트 발생 시 이벤트에 관련한 다양한 정보를 가진 이벤트 객체가 동적으로 생성된다.
- 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
- 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록했다면 반드시 event라는 이름을 사용해야 한다.
2-2. this
- 이벤트 핸들러 어트리뷰트 방식의 경우 이벤트 핸들러에 의해 일반 함수로 호출 되고 일반 함수 내부의 this는 전역 객체 window를 가리킨다.
- 이벤트 핸들러 호출 시 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
- 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.
- 즉, 이벤트 핸들러 내부의 this는 이벤트 객체의 currentTarget 프로퍼티와 같다.
- 화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다.
- 화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다는 점의 유의한다.
3. 이벤트 타입(Event Type)
3-1. 마우스
- 마우스 이벤트 종류
- mousedown/mouseup
- mouseover/mouseout
- mousemove
- click
- contextmenu
3-2. 선택 및 복사 방지
- mousedown, mousemove 이벤트가 발생할 때 나타나는 브라우저 기본 동작을 막으면 글씨 선택을 막을 수 있다.
- copy 이벤트가 발생할 때 나타나는 브라우저 기본 동작을 막아 복사를 막을 수도 있다.
- 브라우저 기본 동작을 막는 방법은 이벤트 객체의 preventDefault 메서드를 호출하는 방법과 이벤트 핸들러 함수 반환 값을 false로 지정하는 것이 있다.
3-3. 키보드
- 키보드 이벤트 종류
- keydown
- keyup
- 키보드 이벤트 속성
- event.key : 문자
- event.code : 물리적인 키 코드
- Ex. 소문자 a를 입력하면 event.key=a event.code=KeyA 대문자 A를 입력하면 event.key=A event.code=KeyA
나는 할 수 있다...!