Chapter 09. 이벤트 기초 및 활용

Posted on: 2023년 10월 23일 2023년 10월 23일
Categories: 강의자료, 웹프로그래밍

교재 예제
이벤트
1. 정의 : 마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타이머의 타임 아웃 등 사용자의 입력 행위나 문서나 브라우저의 상태 변화를 자바스크립트 코드에게 알리는 통지(notification)
2. 이벤트 리스너 : 발생한 이벤트에 대처하기 위해 작성된 자바스크립트 코드
3. 이벤트 종류
  1. HTML5에서 이벤트 종류는 70여가지
  2. 이벤트 리스너 이름은 이벤트 이름 앞에 on을 덧붙임
4. 주요 이벤트 리스너
  1. onkeydown
  2. onkeypress
  3. onkeyup
  4. onclick
  5. oncontextmenu
  6. ondblclick
  7. onmousedown
  8. onmouseenter
  9. onmouseleave
  10. onmousemove
  11. onmouseover
  12. onmouseout
  13. onmouseup
  14. onwheel
  15. onabort
  16. onerror
  17. onload
  18. onresize
  19. onunload
  20. onbeforeprint
  21. onafterprint
  22. onfocus
  23. onblur
  24. onchange
  25. onreset
  26. onsearch
  27. onselect
  28. onsubmit

이벤트 리스너 만들기

HTML 태그 내에 작성

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p onmouseover="this.style.backgroundColor='orchid'"
   onmouseout="this.style.backgroundColor='white'">마우스 이벤트</p>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

<p onmouseover="this.style.backgroundColor='orchid'"

onmouseout="this.style.backgroundColor='white'">마우스 이벤트</p>

</body>

</html>

DOM 객체의 이벤트 리스터 프로퍼티에 작성

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script>
let p;
function init() { // 문서가 완전히 로드되었을 때 호출
  p = document.getElementById("p");
  p.onmouseover = over; // over()를 onmouseover 리스너로 등록
  p.onmouseout = out; // out()를 onmouseout 리스너로 등록
}
function over() {
  p.style.backgroundColor="orchid";
}
function out() {
  p.style.backgroundColor="white";
}
</script>

</head>
<body onload="init()">
<p id="p">마우스 이벤트</p>
</body>
</html>

<!DOCTYPE html>

<html>

let p;

function init() { // 문서가 완전히 로드되었을 때 호출

p = document.getElementById("p");

p.onmouseover = over; // over()를 onmouseover 리스너로 등록

p.onmouseout = out; // out()를 onmouseout 리스너로 등록

}

function over() {

p.style.backgroundColor="orchid";

}

function out() {

p.style.backgroundColor="white";

}

</script>

</head>

</body>

</html>

DOM 객체의 addEventListener() 메소드 이용

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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()">
<p id="p">마우스 이벤트</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>addEventListener()를 이용한 리스너 등록</title>

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>

</html>

whan0623

516