#3.0 ~ #3.5
#3.0 The Document Object : 자바스크립트는 HTML을 변경할 수 있고, 읽어올 수 있다.
#3.1 HTML in Javascript : console.dir()를 하면 element정보를 읽어올 수 있다.
#3.2 Searching For Elements :
querySelector =>
-element를 css방식으로 읽어올 수 있다. (ex. 클래스명: .hello / ID명: #hello)
-element가 많을 경우에는 첫번째 element만 가져온다.
#3.3 Events : console.dir()의 element 중 on으로 시작하는 것들은 event다.
#3.4 Events part Two : 구글에 MDN을 검색할때 JS관점으로 HTML태그를 검색하려면 Web APIs라고 되어있는 문서를 찾는다.
#3.5 More Events : addEventListener를 on element보다 많이 쓰는 이유는 remove명령어로 EventListener를 제거할 수 있기 때문이다.
과제 :
// <⚠️ 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 = {
handleMouseOn: function () {
title.innerText = "The mouse is here!";
title.style.color = colors[0];
},
handleMouseLeave: function () {
title.innerText = "The mouse is gone!";
title.style.color = colors[1];
},
handleWindowResize: function () {
title.innerText = "You just resized!";
title.style.color = colors[2];
},
handleMouseRightClick: function () {
title.innerText = "That was a right click!";
title.style.color = colors[3];
}
};
title.addEventListener("mouseenter", superEventHandler.handleMouseOn);
title.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleWindowResize);
title.addEventListener("contextmenu", superEventHandler.handleMouseRightClick);