[기본 문법 11] Events part Two

// event
const title = document.querySelector("div.hello:first-child h1");

// 사용가능 event 확인
console.dir(title);

function handleTitleClick() {
    console.log("title was clicked!");
    title.style.color = "blue";
}

function handleMouseEnter() {
    console.log("mouse is here!");
    title.innerText = "Mouse is here!";
    title.style.color = "red";
}

function handleMouseLeave() {
    console.log("mouse is out!");
    title.innerText = "Mouse is gone!";
    title.style.color = "green";
}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

listen하고 싶은 event 찾는 방법!
1. 구글에 찾고 싶은 element의 이름 검색하기 ex) h1 html element mdn(mozilla developer network)
2. 그 중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미)

console.dir을 통해서 element를 console에 출력시키기 console.dir(title);=> 여기서도 사용가능한 event 찾을 수 있다. property 이름 앞에 on 이 있다면 그게 바로 event listener!!!! 사용할때는 on 빼고 쓰기

style은 CSS를 통해서 변경되어야 한다.