Note

노마드코더 바닐라 JS 챌린지 4일차 본문

#학습/AI&IT

노마드코더 바닐라 JS 챌린지 4일차

참잘했을까요? 2021. 8. 27. 01:28
반응형

JS 이벤트 참조

https://developer.mozilla.org/ko/docs/Web/Events

 

이벤트 참조 | MDN

DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가

developer.mozilla.org

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


function handlemouseenter(){
    title.innerText = "The mouse is here!";
    title.style.color = "green";
};

function handlemouseleave () {
    title.innerText = "The mouse is gone!";
    title.style.color = "blue";
    };


function contextmenu () {
        title.innerText = "That was a right click!";
        title.style.color = "orange";

      };


function handleWindowResize(){
    title.innerText = "You just resized!";
    title.style.color = "purple";
};

title.addEventListener("mouseenter", handlemouseenter);
title.addEventListener("mouseleave", handlemouseleave);

window.addEventListener("contextmenu", contextmenu);


window.addEventListener("resize", handleWindowResize);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js">    </script>
</body>
</html>

 

 

반응형

'#학습 > AI&IT' 카테고리의 다른 글

노마드코더 바닐라 JS 챌린지 9일차  (0) 2021.08.31
노마드코더 바닐라 JS 챌린지 8일차  (0) 2021.08.31
취준생을 위한 코딩 교육 프로그램  (0) 2021.08.26
노마드코더 바닐라 JS 챌린지 3일차  (0) 2021.08.26
노마드코더 바닐라 JS 챌린지 2일차  (0) 2021.08.25
'#학습/AI&IT' Related Articles more
Comments