[240603] 40장 이벤트 (2)
이벤트 핸들러 제거
- addEventListener 메서드로 등록한 이벤트 핸들러 제거
- EventTarget.prototype.removeEventListener 메서드 사용
- addEventListener 인수에 전달한 동일해야함 → 무명함수 제거 불가능
$button.addEventListener('click', handleClick);
$button.removeEventListener('click', handleClick);
- 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러 제거
- $button.onclick = null ;
이벤트 객체
- 이벤트가 발생하면 이벤트 객체가 동적으로 생성
- 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달
<!-- 이벤트 핸들러 어트리뷰트 방식의 경우, event 가 아닌 다른 이름으로는 이벤트 객체 전달 못 받음 -->
<body onclick="showCoords(event)">
<script>
function showCoords(e) {
$msg.textContent = `clientX: ${e.clientX}`;
}
</script>
</body>
// 암묵적으로 어트리뷰트는 파싱되어 함수 몸체에 있기 때문
function onclick(event) { // 첫 번째 매개변수 이름이 event
showCoords(event);
}
1. 이벤트 객체의 상속 구조
- 이벤트 타입에 따라 다양한 타입의 이벤트 객체가 생성됨
- MouseEvent 타입의 이벤트 객체는 마우스 클릭했을 때
- Event 인터페이스는 DOM 내에서 발생한 이벤트에 의해 생성되는 이벤트 객체 나타냄
- FoucsEvent, KeyboardEvent, wheelEvent 등 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의되어 있다.
2. 이벤트 객체의 공통 프로퍼티
| 공통 프로퍼티 | 설명 | 타입 | | — | — | — | | type | 이벤트 타입 | string | | target | 이벤트 발생시킨 DOM 요소 | DOM 요소 노드 | | currentTarget | 이벤트 핸들러가 바인딩된 DOM 요소 | DOM 요소 노드 | | eventPhase | 이벤트 전파 단계 0: 이벤트 없음 1: 캡처링 단계 2: 타깃 단계 3: 버블링 단계 | number | | bubbles | 이벤트를 버블링으로 전파하는지 여부. 다음 이벤트는 bubbles: false 로 버블링하지 않는다. 포커스 이벤트: focus/blur 리소스 이벤트: load/unload/abort/error 마우스 이벤트: mouseenter/mouseleave | boolean | | cancelable | preventDefault 메서드를 호출하여 이벤트의 기본 동적을 취소할 수 있는지 여부. 다음 이벤트는 cancelable: false 로 취소할 수 없다. 포커스 이벤트: focus/blur 리소스 이벤트: load/unload/abort/error 마우스 이벤트: dblclick/mouseleave | boolean | | defaultPrevented | preventDefault 메서드를 호출하여 이벤트를 취소했는지 여부 | boolean | | isTrusted | 사용자의 행위에 의해 발생한 이벤트인지 여부. 예를 들어, click 메서드 또는 dispatchEvent 메서드를 통해 인위적으로 발생시킨 이벤트인 경우 isTrusted는 false다. | boolean | | timeStamp | 이벤트 발생한 시각(1970/01/01/00:00:00부터 경과한 밀리초) | number |
const $checkbox = document.querySelector('input[type=checkbox]');
const $msg = document.querySelector('.message');
$checkbox.onchange = e => {
console.log(Object.getPrototypeOf(e) === Event.prototype); // true
}
3. 마우스 정보 취득
- click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave 이벤트가 발생하면 생성되는 MouseEvent 타입의 이벤트 객체는 아래와 같은 고유의 프로퍼티 갖는다.
- 마우스 포인터 좌표 정보를 나타내는 프로퍼티 : screenX/screenY, clientX/clientY, pageX/pageY, offsetX/offsetY
- 버튼 정보를 나타내는 프로퍼티 : altKey, ctrlKey, shiftKey, button
4. 키보드 정보 취득
- keydown, keyup, keypress 이벤트가 발생하면 생성되는 KeyboardEvent 타입의 이벤트 객체는 altKey, shiftyKey, metaKey,key, keyCode 같은 고유의 프로퍼티 갖는다.
Leave a comment