3.4 Events (2)

강의

여러 Event를 찾는법

listen하고 싶은 event를 찾는 가장 좋은 방법은, "h1 html element mdn"이런식으로 검색해보면 된다. 링크에 Web APIs라는 문장이 포함된 페이지를 찾을거다. 왜냐하면 이건 JS 관점의 HTML Heading Element란 의미이기 때문이다.

이게 좀 지루하다면 저번 강의 때 얘기해준 console.dir( )을 통해 element를 콘솔에 출력시켜 엄청 많은 property를 확인한다. 사용가능한 이벤트는 on~이 붙어있는 property를 찾으면 된다. 대신 이벤트를 사용할 때에는 on을 빼고 사용해야한다.

mouseenter, mouseleave

mouseenter : 마우스를 위에 올려놓으면 실행된다.
mouseleave : 마우스가 위에 없을면 실행된다.

const title = document.querySelector(".hello h1");
function handleMouseEnter(){
    title.innerText = "mouse is here!"
}
function handleMouseLeave(){
    title.innerText = "mouse is gone!"
}
title.addEventListener("mouseenter",handleMouseEnter);
title.addEventListener("mouseleave",handleMouseLeave);

우리는 지금 JS로 style을 변경했다. 다만 생각해보면 style을 변경하는건 css가 하는게 옳다. JS로 가능은 하지만, 대부분의 경우에 style은 css에 통해서 변경되어야 한다.
우리는 css파일을 어떻게 사용하는지 배워볼거다!

+)다음강의때 배우나....? 아님 따로 css강의를 들어야하나...? 무튼 강의내용은 끝!