바닐라 JS) 9. Event Listner

송민경

Sep 01, 2024

Contents

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란 의미

HTMLElement - Web API | MDN

HTMLElement 인터페이스는 모든 종류의 HTML 요소를 나타냅니다. 일부 요소는 이 인터페이스를 직접 구현하지만 나머지 요소는 HTMLElement를 상속한 자식 인터페이스를 구현합니다.

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement

속성 앞에 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);

See more posts

바닐라 JS) 9. Event Listner

1. style로 JavaScript 객체 변경하기

2. Event가 일어나는 과정

3. Click Event

3. Event 찾는 방법

More articles

바닐라 JS) 11. 값 입력받기

바닐라 JS) 10. CSS

바닐라 JS) 8. Document

바닐라 JS) 7. 조건문 사용하기