const title = document.querySelector("h2");
const body = document.querySelector("body");
function onMouseenterTitle() {
title.style.color = colors[0];
title.innerText = "The mouse is here!";
}
function onMouseleaveTitle() {
title.style.color = colors[1];
title.innerText = "The mouse is gone!";}
function onMouseRightClick() {
title.style.color = colors[2];
title.innerText = "That was a right click!";}
function onResizeWindow() {
title.style.color = colors[3];
title.innerText = "You just resize!";}
title.addEventListener("mouseenter", onMouseenterTitle);
title.addEventListener("mouseleave", onMouseleaveTitle);
document.addEventListener("contextmenu", onMouseRightClick); //document를 body로 바꾸면 작동 안함...
window.addEventListener("resize", onResizeWindow);
const body = document.querySelector("body");
function onMouseenterTitle() {
title.style.color = colors[0];
title.innerText = "The mouse is here!";
}
function onMouseleaveTitle() {
title.style.color = colors[1];
title.innerText = "The mouse is gone!";}
function onMouseRightClick() {
title.style.color = colors[2];
title.innerText = "That was a right click!";}
function onResizeWindow() {
title.style.color = colors[3];
title.innerText = "You just resize!";}
title.addEventListener("mouseenter", onMouseenterTitle);
title.addEventListener("mouseleave", onMouseleaveTitle);
document.addEventListener("contextmenu", onMouseRightClick); //document를 body로 바꾸면 작동 안함...
window.addEventListener("resize", onResizeWindow);
우클릭하면 h2에 있는 텍스트가 바뀌게 만들었는데
h2를 우클릭 해야만 텍스트가 바뀌어서
페이지의 빈 면을 우클릭 해도 텍스트가 바뀌게 하고 싶어서
body를 변수선언 한 다음에
body.addEventListener를 썼는데 작동을 안했음
document.addEventListener로 하니까 내가 원하는 대로 작동이 됐음
이유가 뭐냐??
