Javascript : Event Object(event 객체)
2023. 3. 15. 17:21ㆍjavascript
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript - Event Object</title>
<link rel="stylesheet" href="../../css/reset.css">
<link rel="stylesheet" href="../../css/dark.css">
<style>
#box1 {
width: 300px;
height: 300px;
margin: 0 auto;
padding: 20px;
background-color: yellowgreen;
color:navy;
}
#box2 {
width: 200px;
height: 200px;
margin: 0 auto;
padding: 20px;
background-color: blueviolet;
}
#box3 {
width: 100px;
height: 100px;
margin: 0 auto;
padding: 20px;
background-color: orange;
}
</style>
<script>
// 일반적으로 JavaScript 코드에서 요소를 탐색할 때
// 해당 요소가 이미 DOM 에 만들어져 있어야한다.
// head 태그 내에서 script 작성하면 body 내의 요소들이
// 생성되지 않았기 때문에 조작이 불가능하다.
var hello = document.getElementById("hello");
console.log(hello);
// hello.style.color = "orange";
// → 현재 head 태그까지만 DOM 에 생성되었으며
// 이후 요소들은 아직 해석되지 않았기 때문에
// 조작이 불가능하다.
// window 객체의 load 이벤트
// - 브라우저가 HTML 문서를 모두 읽고 해석한 다음
// DOM의 구축이 끝났을 때 발생하는 이벤트
// - 요소가 DOM 에 모두 생성되었기 때문에
// load 이벤트 핸들러 내에서는 모든 요소들을
// 조작할 수 있다.
window.onload = function() {
// window 객체의 load 이벤트의 이벤트 핸들러
var hello = document.getElementById("hello");
console.log(hello);
hello.style.backgroundColor="yellowgreen";
hello.style.color="navy";
}
</script>
</head>
<body>
<h1 id="hello" class="gray-box">Hello World!</h1>
<script>
// 이벤트 객체(event object)
// - 이벤트가 발생하면 자동으로 생성되는 객체
// - 이벤트가 발생했을 때의 정보를 가지고 있으며
// 이벤트와 관련된 기능을 가지고 있다.
// - 이벤트 핸들러의 매개변수로 전달된다.
var hello = document.getElementById("hello");
hello.onclick = function( event ) {
console.log(event);
}
</script>
<hr>
<div class="gray-box">
<div id="box1">box1
<div id="box2">box2
<div id="box3">box3</div>
</div>
</div>
</div>
<script>
// 이벤트 전달
// - 중첩된 다른 요소로 이벤트를 전달
// - 기본적인 이벤트 전달 방식은 '버블링'이다.
// → 하위 요소에서 상위 요소로 전달
// - 이벤트 전달 제거 메서드
// → event.stopPropagation();
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
function eventLog(event) {
// this = 자기 자신 = 해당 함수를 수행하는 객체
console.log(this.id + "'s handler");
console.log("currentTarget : " + event.currentTarget.id);
// → 현재 이벤트 핸들러를 수행하는 요소 객체
console.log("target : " + event.target.id);
// → 실제 이벤트가 발생한 요소 객체
console.log("--------------------------");
// 이벤트 전달 제거
event.stopPropagation();
}
box1.onclick = eventLog;
box2.onclick = eventLog;
box3.onclick = eventLog;
</script>
<hr>
<div class="gray-box">
</div>
<script>
// 기본 이벤트(defualt event)
// - 요소가 기본적으로 가지는 이벤트
// - 기본 이벤트를 수행하지 않으려면
// 기본 이벤트를 제거해야한다.
// - a 요소, form 요소 ..
var link = document.getElementById("link");
link.onclick = function(event) {
window.alert("권한이 부족합니다.");
// 기본 이벤트 제거
event.preventDefault();
}
</script>
</body>
</html>
'javascript' 카테고리의 다른 글
| Javascript : Event(이벤트) 2 (0) | 2023.03.15 |
|---|---|
| Javascript : Event Model(이벤트 모델) (0) | 2023.03.15 |
| Javascript : Event(이벤트) 1 (0) | 2023.03.15 |
| Javascript : Element 3 (0) | 2023.03.15 |
| Javascript : Element 2 (0) | 2023.03.15 |