📌Event란?
Event의 예시들
- click을 하는 것,
- h1 위로 마우스가 올라가는 것,
- 입력을 끝내는 것,
- 이름을 적는 것,
- enter를 누르는 것,
- wifi에서 접속이 해제되는 것 등
이 모든 것들이 event이고 JavaScript는 이 event들을 listen 할 수 있다.
📌Event의 단계
step 1. element를 찾아라
step 2. event를 listen 해라
step 3. 그 event에 반응해라
📌addEventListener
addEventListener: 말그대로 event를 listen하는 것.
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
console.log("title was clicked!");
}
h1.addEventListener("click", handleTitleClick);html element를 선택(예시에서는 'title'을 선택했음)
-> 함수 addEventListener 호출 (listen 해야 하니까 )
-> listen하고 싶은 event 종류 설정(예시에서는 'click'을 선택)
-> event가 발생하면 건내 줄 function 전달 (예시에서는 임의로 'handleTitleClick'라는 이름을 만듦. 이름 짓는 건 개발자 마음. 여기까지는 JS에 function만 건내준 상태)
-> 함수 실행 handleTitleClick() -> 유저가 title을 click할 경우, JS가 실행버튼을 눌러서 결과 발생
📌event 종류 찾기
listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름과 mdn을 함께 검색해 보는 것이다. (예를 들어, h1 html element mdn)
수많은 링크 중 Web APIs라는 문장이 포함된 페이지를 찾는다. Web APIs는 자바스크립트 관점에서 해석한다는 의미다.
🌐 HTMLHeadingElement - Web APIs | MDN
전부 다 들여다 보는게 지루하다면 console.dir를 통해 console창에서 사용 가능한 event들을 확인할 수 있다.
property 이름 앞에 on이 붙어있다면, 그게 바로 event listener다.
event를 사용할 때는 on을 빼고 사용해야 한다. 예를 들어, onclick은 click으로 사용한다.
'마우스가 글자 위에 올라갈 때'를 의미하는 event는 mouseenter이다.
'마우스가 글자 위에 올라가지 않을 때'를 의미하는 event는 mouseleave이다.
const title = document.querySelector("div.hello first-child h1"); //element 선택
function handleTitleClick() { //함수 실행 버튼
h1.style.color = "blue"; //함수 실행 결과
}
function handleMouseEnter() {
h1.innerText = "Mouse is here!";
}
function handleMouseLeave() {
h1.innerText = "Mouse is gone!";
}
h1.addEventListener("click",handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);
//element.event호출함수("event종류","함수 이름")<마우스를 title에 올려놓지 않았을 때>
<마우스를 title에 올려놓았을 때>
<마우스로 title을 'click' 했을 때>
📌More Events
h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);위의 코드를 아래 코드 처럼 표현할 수도 있다. 둘의 결과는 같다.
h1.onlick = handleTitleClick;
h1.onmouseenter = handleMouseEnter;
h1.onmouseleave = hadnleMouseLeave;니코는 첫번째 코드를 더 선호한다. 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문이다.
📌window events
참고자료
🌐Window - Web APIs
resize
화면 크기가 변할 때
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
//화면 크기가 변하면 body의 backgroundColor를 tomato 색으로 바꿔주세요.
}
window.addEventListener("resize", handleWindowResize);
}console에서 document.body은 검색이 가능하지만 document.div는 불가능하다. body, head, title은 중요해서 존재하지만, 나머지 element들은 querySelector나 getElementById 등을 이용해서 찾아야한다.
window element의 resize event를 listen하고 있음
-> 만약 이 event가 발생한다면 handleWindowResize가 실행됨
-> handleWindowResize funtion은 body의 backgroundcolor를 변경할 것
copy
복사를 할 때 (ctrl + c도 해당)
function handleWindowCopy() {
alert("copier!"); //복사 event가 실행되면 알림을 띄워주세요.
}
window.addEventListener("copy", handleWindowCopy);offline
wifi가 off 될 때(꺼질 때)
function handleWindowOffline() {
alert("SOS no WIFI!");
//wifi가 off되면 알림을 띄워주세요.
}
window.addEventListener("offline", handleWindowOffline);online
wifi가 on 될 때 (켜질 때)
function handleWindowOnline() {
alert("ALL GOOD~")
//wifi가 on되면 알림을 띄워주세요.
}
window.addEventListener("online", handleWindowOnline);📌전체 코드
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum App</title>
</head>
<body>
<div class="hello">
<h1>Grab me 1!</h1>
</div>
<div class="hello">
<h1>Grab me 2!</h1>
</div>
<div class="hello">
<h1>Grab me 3!</h1>
</div>
<script src="app.js"></script>
</body>
</html><app.js>
const h1 = document.querySelector("div.hello:first-child h1"); //element 선택
function handleTitleClick() { //함수 실행버튼
h1.style.color = "blue"; //실행 결과
}
function handleMouseEnter() {
h1.innerText = "Mouse is here!";
}
function handleMouseLeave() {
h1.innerText = "Mouse is gone!";
}
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
function handleWindowOffline() {
alert("SOS no WIFI!");
}
function handleWindowOnline() {
alert("ALL GOOD~")
}
h1.addEventListener("click",handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);