자바스크립트에서 이벤트 객체는 이벤트가 발생할 때 생성되는 객체로, 다양한 프로퍼티를 포함하고 있습니다.
주요 프로퍼티
- type: 이벤트의 종류 (예: 'click', 'keydown' 등).
- target: 이벤트가 발생한 요소.
- currentTarget: 이벤트 리스너가 부착된 요소.
- bubbles: 이벤트가 버블링되는지 여부.
- cancelable: 이벤트가 기본 동작을 취소할 수 있는지 여부.
- clientX, clientY: 마우스 이벤트의 경우, 클라이언트 영역 내의 좌표.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체 예제</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
// 이벤트 객체 출력
console.log('이벤트 타입:', event.type); // 'click'
console.log('이벤트 타겟:', event.target); // 버튼 요소
console.log('현재 타겟:', event.currentTarget); // 버튼 요소
console.log('버블링 여부:', event.bubbles); // true
console.log('취소 가능 여부:', event.cancelable); // true
console.log('클라이언트 X:', event.clientX); // 클릭한 X 좌표
console.log('클라이언트 Y:', event.clientY); // 클릭한 Y 좌표
});
</script>
</body>
</html>설명
- HTML: 버튼을 만들고, 버튼에 클릭 이벤트 리스너를 추가했습니다.
- JavaScript: 버튼 클릭 시 이벤트 객체의 주요 프로퍼티를 콘솔에 출력합니다.
이 코드를 브라우저에서 실행하면 버튼을 클릭할 때마다 이벤트 객체의 프로퍼티를 확인할 수 있습니다
'JAVASCRIPT' 카테고리의 다른 글
| 버블링이란? (0) | 2024.10.30 |
|---|---|
| preventDefault(), stopPropagation(), return false 차이점 (0) | 2024.10.30 |
| 객체란? (0) | 2024.10.24 |
| javascript class (0) | 2024.10.23 |
| javascript scope (0) | 2024.10.23 |