WON.dev
chapter03 : 이벤트_객체 본문
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
onload = function(){
var h = document.querySelector("#heading");
h.onclick = change; // 이벤트 연결
}
// 이벤트 리스너
function change(){
console.log(this);
// 이벤트 리스너가 등록된 객체 : 이벤트 객체
// 리스너 내에서는 "this == 이벤트 객체" (change > h > this)
this.innerHTML = "바뀐 제목";
this.style.backgroundColor = "gold";
}
</script>
</head>
<body>
<h1 id="heading">원래 제목</h1>
</body>
</html>'WEB.JS > 10.EVENT_JS' 카테고리의 다른 글
| chapter01 : 이벤트_개요 (0) | 2023.05.22 |
|---|---|
| chapter02 : 이벤트_개요 (0) | 2023.05.22 |
| chapter04 : 디폴트_이벤트 (0) | 2023.05.22 |
| chapter05 : 마우스_이벤트 (0) | 2023.05.22 |
| chapter06 : 키보드_이벤트 (0) | 2023.05.22 |