HTML문서 내의 특정 DOM에서 특정 이벤트가 발생하면 우리는 그것을 이벤트 객체에서 확인 할 수 있다.
이때 이벤트 리스너(Event listner)는 DOM 객체에서 이벤트가 발생할 경우 그 해당 이벤트에 대한 처리 핸들러를 추가할 수 있는 오브젝트이다.
이러한 이벤트 리스너를 사용하여 사용자로부가 마우스클릭이나 키보드 입력 등에 대한 행동을 할 때
특정 함수를 호출해줘서 기능을 구현할 수 있다.
아래는 샘플 코드이다.
<1 샘플 html >
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>this is test page</title>
</head>
<body>
<div class = "hello">
<h1>first</h1>
</div>
<div class = "hello">
<h1 id="sh1">second!</h1>
</div>
<div class = "hello">
<h1>3rd</h1>
</div>
<script src = "app.js"></script>
</body>
</html>
<2 샘플 js>
const h1 = document.querySelector(".hello:first-child h1"); //h1 태그를 가져옴
function handleh1Clicked(){ // 마우스클릭시에 대한 기능구현
if(h1.style.color == "red"){
h1.style.color = "blue";
}else{
h1.style.color = "red";
}
}
function handleMouseEnter(){ //마우스 포인터 좌표가 h1 태그영역에 들어올 시 기능구현
console.log("mouse is hear");
}
function handleMouseLeave(){
console.log("mouse is gone");
}
function handleWindowResize(){ // os의 자원을 가져와서 브라우저창의 크기가 달려졌을 시 기능구현
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){ // ctrl + c 사용시 기능구현
alert("cpier");
}
function handleWindowOffline(){ // wifi가 꺼졌을 때의 기능구현
alert("SOS no WIFI")
}
function handleWindowOnline(){
alert("ALL GOOD")
}
//mouse enter and leave event
h1.addEventListener("mouseenter",handleMouseEnter);
h1.addEventListener("mouseleave",handleMouseLeave);
//mouse click event
h1.addEventListener("click", handleh1Clicked);//방법1
//widow 자원 resize event
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy)
window.addEventListener("offline", handleWindowOffline)
window.addEventListener("online", handleWindowOnline)위 샘플코드에서 보이는 것처럼 OS에서 발생한 이벤트에 대해서도 os자원을 가져와서 기능을 구현할 수 있다.
이외에도 방대한 이벤트 리스너가 존재하는데 이것은 MDN 사이트에서 확인 할 수 있다.
https://developer.mozilla.org/ko/docs/Web/Events
이벤트 참조 | MDN
DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가
developer.mozilla.org
'JavaScript' 카테고리의 다른 글
| JS - 자바스크립트 호이스팅과 변수의 생성과정에 대해 (0) | 2022.04.27 |
|---|---|
| JS - toggle (0) | 2021.11.20 |
| JS - localStorage 다루기 와 preventDefault() (0) | 2021.04.04 |
| JS - 자바스크립트 시간출력 (0) | 2021.04.04 |
| JS : JavaScript DOM 객체란? (0) | 2021.04.03 |