javascript-27: event,method function,innerText,array
이벤트 만들기
<!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" />
<title>Document</title>
</head>
<body>
<h2>Hello!</h2>
<script defer src="./app.js"></script>
</body>
</html>
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
const hello = document.querySelector("h2");
const superEventHandler = {
handleMouseOver: function () {
hello.innerText = "The Mouse is here!";
hello.style.color = colors[0];
},
handleMouseLeave: function () {
hello.innerText = "The Mouse is gone!";
hello.style.color = colors[1];
},
handleWindowResize: function () {
hello.innerText = "You just resized!";
hello.style.color = colors[2];
},
handleOnContextMenu: function () {
hello.innerText = "That was a right click!";
hello.style.color = colors[4];
},
};
hello.addEventListener("mouseover", superEventHandler.handleMouseOver);
hello.addEventListener("mouseleave", superEventHandler.handleMouseLeave);
window.addEventListener("resize", superEventHandler.handleWindowResize);
window.addEventListener("contextmenu", superEventHandler.handleOnContextMenu);
vs
const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"];
const hello = document.querySelector("h2");
function handleMouseOver() {
hello.innerText = "The Mouse is here!";
hello.style.color = colors[0];
}
function handleMouseLeave() {
hello.innerText = "The Mouse is gone!";
hello.style.color = colors[1];
}
function handleWindowResize() {
hello.innerText = "You just resized!";
hello.style.color = colors[2];
}
function handleOnContextMenu() {
hello.innerText = "That was a right click!";
hello.style.color = colors[4];
}
hello.addEventListener("mouseover", handleMouseOver);
hello.addEventListener("mouseleave", handleMouseLeave);
window.addEventListener("resize", handleWindowResize);
window.addEventListener("contextmenu", handleOnContextMenu);
- innerText와 innerHtml의 차이
- innerText: element의 text값만 바꿔줌
- innerHtml: element의 HTML구조 자체를 바꿔줌(태그까지 바꿀수있음)
이벤트리스트 : https://developer.mozilla.org/ko/docs/Web/Events
댓글남기기