프로그래밍/JavaScript
JavaScript 이벤트 객체
하와이블루
2022. 10. 13. 07:13
728x90
이벤트 객체는 특정 타입의 이벤트와 관련이 있는객체로 해당 타입의 이벤트에 대한 상세 정보는 저장한다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 , 이벤트 대상을 나타내는 Target 프로퍼티를 가진다. 이벤트 객체는 이벤트 리스너가 호출 될 때 인수로 전달된다.
<!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>이벤트 객체</title>
</head>
<body>
<input type="button" id="btn" value="확인">
<script>
'use strict';
function clickBtn(e){
console.log(e.target); // <input type="button" id="btn" value="확인">
console.log(e.target.id); // btn
console.log(e.target.value); // 확인
console.log(e.type); // click
}
const btn = document.getElementById('btn');
btn.addEventListener('click', clickBtn);
</script>
</body>
</html>
728x90