자바스크립트 수업 내용 정리
이벤트 리스너 작성 4가지 방법
- html 태그에 이벤트 리스너 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html 태그 이벤트 리스너 작성하기</title>
</head>
<body>
<h3>html 태그 내에 이벤트 리스너 작성하기</h3>
<hr>
<p onmouseover="this.style.backgroundColor='orchid'" onmouseout="this.style.backgroundColor='white'">
마우스를 올리면 배경색이 orchid로 변경
</p>
</body>
</html>
- addEventListener() 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addEventListener()를 이용한 이벤트</title>
<script>
let p;
function init(){
p = document.getElementById("p")
p.addEventListener("mouseover",over);
p.addEventListener("mouseout",out);
}
function over(){
p.style.backgroundColor = "orchid";
}
function out(){
p.style.backgroundColor = "white";
}
</script>
</head>
<body onload="init()">
<h3>addEventListener()를 이용한 이벤트 등록</h3>
<hr>
<p id="p">마우스를 올리면 색깔이 바뀜</p>
</body>
</html>
- 이벤트 리스너에서 이벤트 객체 전달받기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체 전달받기</title>
</head>
<body>
<p id="p">마우스를 올려보세요.</p>
<button onclick="f(event)">클릭</button>
<script>
function f(e){ //e = 이벤트를 가지고 있는 객체
alert(e.type);
}
document.getElementById("p").onmouseover = f;
</script>
</body>
</html>
- DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</title>
<script>
let p;
function init(){
p = document.getElementById("p");
p.onmouseover = over;
p.onmouseout = out;
}
function over(){
p.style.backgroundColor = 'orchid';
}
function out(){
p.style.backgroundColor = 'white';
}
</script>
</head>
<body onload="init()">
<h3>DOM 객체의 이벤트 리스너 프로퍼티에 함수 등록</h3>
<hr>
<p id="p">마우스를 올리면 색깔이 바뀜</p>
</body>
</html>
- 익명함수로 이벤트 리스너 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>익명함수로 이벤트 리스너 작성</title>
<script>
function init(){
p = document.getElementById("p");
p.onmouseover = function(){
this.style.backgroundColor = "orchid";
}
p.addEventListener("mouseout",function(){
this.style.backgroundColor = "white";
});
}
</script>
</head>
<body onload="init()">
<h3>익명함수로 이벤트 리스너 작성하기</h3>
<hr>
<p id="p">마우를 올리면 색깔이 바뀜</p>
</body>
</html>
이벤트 객체의 프로퍼티 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체 property</title>
</head>
<body>
<h3>이벤트 객체 프로퍼티 출력</h3>
<hr>
<p id="p">버튼을 클릭하면 이벤트 객체 정보를 출력합니다.</p>
<button onclick="f(event)">클릭하세요</button>
<script>
function f(e){
let text = "type : " + e.type + "<br>"
+ "target : " + e.target + "<br>"
+ "currenttarget : " + e.currenttarget +"<br>"
+ "defaultPrevented : " + e.defaultPrevented;
let p = document.getElementById("p");
p.innerHTML = text;
}
</script>
</body>
</html>
이벤트 흐름
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 흐름</title>
</head>
<body>
<p style="color:blue">이것은
<span style="color:red" id="span">문장입니다.</span>
</p>
<form>
<input type="text" name="s">
<input type="button" value="테스트" id="button">
<hr>
</form>
<div id="div" style="color:green"></div>
<script>
let div = document.getElementById("div");
let button = document.getElementById("button");
document.body.addEventListener("click",capture,true);
button.addEventListener("click", bubble, false);
document.body.addEventListener("click",bubble,false);
function capture(e){
let obj = e.currentTarget;
let tagName = obj.tagName;
div.innerHTML += "<br>capture 단계 : " + tagName + " 태그 : " + e.type + " 이벤트";
}
function bubble(e){
let obj = e.currentTarget;
let tagName = obj.tagName;
div.innerHTML += "<br>bubble 단계 : " + tagName + " 태그 : "+ e.type + " 이벤트";
}
</script>
</body>
</html>
new Image()로 새로운 이미지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let files =["img/다람쥐.jpg",
"img/랫서팬더.jpg",
"img/사막여우.jpg",
"img/양.jpg",
"img/코알라.jpg",
"img/하마.jpg"];
let imgs = new Array();
for(let i=0;i<files.length;i++){
imgs[i] = new Image();
imgs[i].src = files[i];
}
let next = 1;
function change(img){
img.src = imgs[next].src;
next++;
next %= imgs.length;
}
</script>
</head>
<body>
<h3>new Image()로 이미지 로딩</h3>
<hr>
이미지를 클릭하면 다음 이미지를 보여줍니다.
<br>
<img src="img/하마.jpg" alt="동물이미지" style="border: 20px ridge wheat" width= "200" height= "200"
onclick="change(this)">
</body>
</html>
Leave a comment