이벤트 객체
마우스 클릭 등 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
<body>
<p class='message'></p>
<script>
const $msg = document.querySelector('.message');
function showCoords(e) { // 이벤트 객체가 첫번째 매개변수에 암묵적으로 할당됨
$msg.textContent = `clientX: ${e.clientX}, clientY : ${e.clientY}`;
}
document.onclick = showCoords;
</script>
</body>클릭이벤트를 이용해 공 움직이기 만들기
아래는 소스코드이다.
- 잘 안되서 일일히 변수들 console.log로 찍어보다가 오타를 발견했다.clientX를 ClientX로 잘못 썼었따..
- EventListener를 DOM요소 중에서 잘 선택해서 붙여야 의도한대로 동작한다. ball에 안 붙이고 document에 바로 붙이니까 다르게 동작하는걸 확인했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.ball {
width: 100px;
height: 100px;
background-color: #fff700;
border: 5px solid orangered;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const $ball = document.querySelector('.ball');
const init = {
x: 0,
y: 0
};
const offset = {
x: 0,
y: 0
};
const move = e => {
offset.x = e.clientX - init.x;
offset.y = e.clientY - init.y;
$ball.style.transform = `translate3d(${offset.x}px, ${offset.y}px, 0)`;
};
$ball.addEventListener('mousedown', e => {
init.x = e.clientX - offset.x;
init.y = e.clientY - offset.y;
$ball.addEventListener('mousemove', move);
});
$ball.addEventListener('mouseup', e => {
console.log("up");
$ball.removeEventListener('mousemove', move);
});
</script>
</body>
</html>이벤트 전파
이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분할수 있다.
- 캡처링 단계: 상위 -> 하위로 전파
- 타깃 단계: 이벤트가 이벤트 타깃에 도달
- 버블링 단계: 하위 -> 상위로 전파
정리하면 이벤트는 캡처링-타깃-버블링 순서로 전파된다.
이벤트 위임
이벤트 위임은 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신, 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다.
이렇게 상위 요소에게 하위 요소의 이벤트를 처리하도록 위임할 수 있는 이유는 이벤트 버블링에 의해 하위요소의 이벤트를 상위 요소 또한 캐치할 수 있기 때문이다.
동작 중단 관련
이벤트 전파 방지
이벤트 객체의 stpPropagation 메서드는 이벤트 전파를 중지시킨다.
DOM 요소의 기본 동작 중단
이벤트 객체의 preventDefault 메서드는 DOM요소의 기본 동작을 중단 시킨다.
커스텀 이벤트 생성
이벤트 객체는 Event, UIEvent, MouseEvent, CustomEvent와 같은 이벤트 생성자 함수로 직접 생성할 수도 있다.
생성된 커스텀 이벤트 객체는 버블링 되지 않고, preventDefault 메서드로 취소할 수도 없다. 즉, 커스텀 이벤트 객체는 bubbles와 cancelable 프로퍼티 값이 false로 기본 설정된다.
const customEvent = new CustomEvent('foo'); // 이벤트 타입을 이렇게 직접 지정할수 도 있다.
console.log(customEvent.type); // foo
console.log(customEvent.bubbles); // false
console.log(customEvent.cancelable); // false커스텀 이벤트 객체를 기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 생성한 경우, 반드시 addEventListener 메서드 방식으로 이벤트 핸들러를 등록해야 한다.예를 들어 'foo'타입의 이벤트 객체를 생성한 경우, 'onfoo'라는 이름의 핸들러 어트리뷰트/프로퍼티는 생성된 적이 없기 때문에 찾을 수 없기 때문이다.
