1. style로 JavaScript 객체 변경하기
- on으로 시작하는 많은 JavaScript Object
- style로 적용해보기
const title = document.querySelector(".hello h1:first-child");
console.log(title);<!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"> <!--style.css 적용하기-->
<title>Hello From HTML</title>
</head>
<body>
<div class="hello">
<h1>Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html> 
2. Event가 일어나는 과정
- HTML의 요소 가져오기
- addEventListener로 호출
- Listen 하고 싶은 이벤트 이름 알려주기
- 이벤트 발생
- 호출할 함수에 전달
3. Click Event
- title을 클릭하는 event 듣기
- 클릭 시 이벤트(함수)를 JavaScript에 넘겨주고 사용자가 title을 클릭할 경우 JavaScript가 실행
- app.js
const title = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
function handleTilteClick(){ // 클릭시 이벤트
console.log("title을 클릭했어요!")
}
title.addEventListener("click", handleTilteClick); // 이벤트 이름, 클릭시 이벤트
- app.js
const title = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
function handleTilteClick(){ // 클릭시 이벤트
title.style.color = "blue";
console.log("title을 클릭했어요!")
}
title.addEventListener("click", handleTilteClick); // 조건 : 클릭, 일어나는 이벤트
3. Event 찾는 방법
- 구글링하기
- MDN(Mozilla Developer Network)
- Mozilla는 Firefox 웹 브라우저를 개발하는 회사
- Mozilla가 웹 개발자와 디자이너를 위한 다양한 자원과 정보를 제공하기 위해 만든 플랫폼
- MDN Web Docs : MDN의 웹 사이트
- 웹 개발과 관련된 포괄적인 문서화 자료를 제공
- MDN의 핵심 웹 리소스
- HTML, CSS, JavaScript, 웹 API 등 다양한 웹 기술에 대한 정보를 포함
h1 html element mdn
- Web APIs라는 문장이 포함된 페이지 찾기
- Web APIs : JavaScript 관점의 HTML Heading Element란 의미
- 속성 앞에 on이 붙어있는 것이 바로 event listener
- 이벤트 사용시 on은 떼고 사용해야 함
title.addEventListener("click", handleTilteClick); // 조건 : 클릭, 일어나는 이벤트const title = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
console.dir(title);
function handleTilteClick(){ // 클릭시 이벤트
title.style.color = "blue";
console.log("title을 클릭했어요!")
}
function handleMouseEnter(){
console.log("마우스는 여기 있어요!")
}
title.addEventListener("click", handleTilteClick); // 조건 : 클릭, 일어나는 이벤트
title.addEventListener("mouseenter", handleMouseEnter); 
- 두 가지 이벤트가 동시에 listen 하고 있음
- Event 추가하기
const title = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
console.dir(title);
function handleTilteClick(){ // 클릭시 이벤트
title.style.color = "blue";
console.log("title을 클릭했어요!")
}
function handleMouseEnter(){
title.innerText = "마우스는 여기 있어요!";
}
function handleMouseLeave(){
title.innerText = "마우스는 여기 없어요!";
}
title.addEventListener("click", handleTilteClick); // 조건 : 클릭, 일어나는 이벤트
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
// removeEventListner를 이용하여 제거할 수도 있음const title = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
console.dir(title);
function handleTilteClick(){ // 클릭시 이벤트
title.style.color = "blue";
console.log("title을 클릭했어요!")
}
function handleMouseEnter(){
title.innerText = "마우스는 여기 있어요!";
}
function handleMouseLeave(){
title.innerText = "마우스는 여기 없어요!";
}
title.onclick = handleTilteClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave; 
- window 사용하기
- 웹 브라우저의 전체 창을 나타내는 JavaScript 객체
- 다양한 브라우저 전역 기능과 속성에 접근 가능
const h1 = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
console.dir(h1);
function handleTilteClick(){ // 클릭시 이벤트
h1.style.color = "blue";
console.log("title을 클릭했어요!")
}
function handleMouseEnter(){
h1.innerText = "마우스는 여기 있어요!";
}
function handleMouseLeave(){
h1.innerText = "마우스는 여기 없어요!";
}
function handleWindowResize(){
document.body.style.backgroundColor = "tomato";
}
h1.addEventListener("click", handleTilteClick); // 조건 : 클릭, 일어나는 이벤트
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("resize", handleWindowResize);
Share article