728x90
반응형
const title = document.querySelector("h2");
// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
// <⚠️ /DONT DELETE THIS ⚠️>
/*
✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"
*/
const title = document.querySelector("h2");
const superEventHandler = {
// const title=document.querySelector('h2');
// title.innerHTML="Gooooogle!";
// title.style.color = "#3498db";
// title.style.fontSize = "30px";
resize: function (event) {
title.style.color = colors[0];
title.innerHTML = "You just resized!";
},
mouseOver: function (event) {
title.style.color = colors[1];
title.innerHTML = "The mouse is here!";
},
mouseGone: function (event) {
title.style.color = colors[2];
title.innerHTML = "The mouse is gone!";
},
clickRight: function (event) {
title.style.color = colors[3];
title.innerHTML = "That is right click!";
}
};
title.addEventListener("mouseover", superEventHandler.mouseOver);
title.addEventListener("mouseleave", superEventHandler.mouseGone);
window.addEventListener("resize", superEventHandler.resize);
title.addEventListener("contextmenu", superEventHandler.clickRight);
오브제.함수("이벤트",함수.변수);
728x90
반응형
'JavaScript' 카테고리의 다른 글
축약연산자 (0) | 2023.04.23 |
---|---|
date, setInterval, localStorage (0) | 2023.04.14 |
toggle (0) | 2023.04.14 |
Objects (0) | 2023.04.14 |
Array (0) | 2023.04.14 |
댓글