Event
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
console.log("title was clicked!");
}
title.addEventListener("click" , handleTitleClick);
// event를 listen 하는 방법
// HTMLelement.addEventListener("listen할 event이름", event가 발생하면 호출할 함수);
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
title.style.color = "green";
}
function handleMouseEnter() {
title.innerText = "Mouse is here~";
}
function handleMouseLeave() {
title.innerText = "Mouse is gone~";
}
title.addEventListener("click" , handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
title.addEventListener("click", handleTitleClick); // .removeEventListener() 을 통해서 event listener 제거 가능
title.onclick = handleTitleClick;
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy() {
alert("copier!");
}
function handleWindowOffline() {
alert("SOS no wifi!");
}
function handleWindowOnline() {
alert("all good!");
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);
document.body
document.title
document.head //가능
document.div //불가능
div, h1 같은 element는 querySelector(), getElementById() 로 찾아야함
CSS in Javacript
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
const currentColor = h1.style.color;
let newColor;
if(currentColor === "blue"){
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick);
index.html
<!DOCTYPE html>
<html lang="en">
<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>Momentum</title>
</head>
<body>
<div class="hello">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
style.css
body {
background-color: beige;
}
h1 {
color: blue;
}
.active {
color : tomato;
}
app.js
const h1 = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
if (h1.className === "active") {
h1.className = "";
} else {
h1.className = "active";
}
}
h1.addEventListener("click", handleTitleClick);
.className = "a"; //class이름을 a 로 변경
const clickedClass = "clicked";
h1.classList.contains(clickedClass); //해당 클래스 이름이 있는지 확인
h1.classList.remove(clickedClass); //제거
h1.classList.add(clickedClass); //추가
h1.classList.toggle("clicked");
// toggle은 h1의 classList에 clicked class가 있는지 확인해서 있으면 제거, 없으면 추가
참고
https://developer.mozilla.org/en-US/docs/Web/API/Element#events
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] application 만들기 2 (CLOCK) (0) | 2024.01.02 |
|---|---|
| [Javascript] application 만들기 1 (LOGIN) (1) | 2023.12.28 |
| [Javascript] 기초 3 (HTML element 접근) (0) | 2023.12.13 |
| [Javascript] 기초 2 (함수, 조건문) (0) | 2023.12.12 |
| [Javascript] 기초 1 (데이터 타입, 변수, 배열, 객체) (0) | 2023.12.11 |
