<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>event객체의 속성들</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) {
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.innerTHML = text;
}
</script>
</body>
</html>