[JavaScript] Event

Event

📌 Event

: 입력을 끝내거나, 마우스로 클릭을 하거나 하는 등의 행위를 말함.

 

📌 .addEventListener()

: 어떤 event를 listen하고 싶은지 설정,

 

💡 console.dir( [element] )

: 앞에 on이 붙은 것이 event. 

 

Event - click

📌 .addEventListener("click", [function] )

: 클릭할 경우, function 실행. 

 

📄 h1을 클릭하면 텍스트가 보라색으로 변함. 

const title = document.querySelector("h1");

function handleTitleClick() {
    title.style.color = "purple";
}

title.addEventListener("click", handleTitleClick);

📄 h1을 클릭하면 텍스트가 green, tomato로 번갈아 색이 바뀌도록 하는 프로그램. 

const title = document.querySelector("h1");

function handleTitleClick() {
    if(title.style.color === "green") {
        title.style.color = "tomato";
    }
    else {
        title.style.color = "green";
    }
}

title.addEventListener("click", handleTitleClick);

 

Event - mouseenter, mouseleave

📌 .addEventListener("mouseenter", [function] )

: 커서가 위에 위치할 경우, function 실행. 

 

📌 .addEventListener("mouseleave", [function] )

: 커서가 위에 위치하지 않는 경우, function 실행. 

 

📄 h1 위에 커서가 있으면 글자색이 빨간색으로 변하고,

     h1 위에 커서가 없으면 글자색이 초록색으로 변하는 프로그램.

const title = document.querySelector("h1");

function handleMouseEnter() {
    title.style.color = "red";
}

function handleMouseLeave() {
    title.style.color = "green";
}

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

💡 아래와 같이 표현해 사용할 수도 있음.

const title = document.querySelector("h1");

function handleTitleClick() {
    title.style.color = "purple";
}

function handleMouseEnter() {
    title.style.color = "red";
}

function handleMouseLeave() {
    title.style.color = "green";
}

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

 

Event - window - resize

📌 window.addEventListener("resize", [function] )

: 창의 크기가  변할 경우, function 실행. 

 

📄 창의 크기를 바꾼 경우, 배경색이 tomato로 변하는 프로그램. 

const title = document.querySelector("h1");

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

 

Event - window - copy

📌 window.addEventListener("copy", [function] )

: 복사를 할 경우, function 실행. 

 

📄 복사할 경우, 경고창 띄우는 프로그램. 

const title = document.querySelector("h1");

function handleWindowCopy() {
    alert("copier!");
}

window.addEventListener("copy", handleWindowCopy);