<!DOCTYPE html>
<html lang="ko">
<meta charset="UTF-8">
<head>
<title>이벤트 객체 프로퍼티</title>
</head>
<body>
<h3>이벤트 객체의 프로퍼티 출력</h3>
<hr>
<p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p>
<button type="button" onclick="f(event)">클릭하세요1</button>
<button type="button" onclick="f(event)">클릭하세요2</button>
<script>
function f(e) { // e는 현재 발생한 이벤트 객체
let text = "type: " + e.type + "<br>"
+ "target: " + e.target + "<br>"
+ "currentTarget: " + e.currentTarget + "<br>"
+ "defaultPrevented: " + e.defaultPrevented;
/* - type은 이벤트 종류, target은 이벤트가 발생한 DOM, currentTarget은 리스너 동작 DOM,
- defaultPrevented는 이벤트 기본 동작의 취소처리
*/
let p = document.getElementById("p");
e.target.innerHTML = "클릭후"; //이벤트가 발생한 DOM객체만 변경
p.innerHTML = text; // 이벤트 객체의 프로퍼티 출력
}
</script>
</body>
</html>