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
