element 객체 내부의 property들 중 이름이 on- 으로 시작하면 모두 event
JS는 모든 event listen 가능
event :
어떤 행위를 하는 것. do something
eventListener :
JS에게 무슨 event를 listen하고싶은지 알려주어 listen함
title.addEventListener("click") :
누군가 title을 click하는 것을 listen할 것임 → click하면 취할 액션 정의
const h1 = document.querySelector("div.hello:first-child h1")
function handleTitleClick() {
h1.style.color = "blue"
}
function handleMouseEnter() {
h1.innerText = "Mouse is here!"
}
function handleMouseLeave() {
h1.innerText = "Mouse is gone!"
}
function handleWindowResize() {
// title, head, body는 document에서 호출 가능
// 그 외 element들은 직접 호출해야함
document.body.style.backgroundColor = "tomato"
}
function handleWindowCopy() {
alert("copier!")
}
function handleWindowOffline() {
alert("SOS no wifi")
}
funciton handleWindowOnline() {
alert("ALL GOOOOD")
}
// removeEventListener로 이벤트리스너 제거 가능
h1.addEventListener("click", handleTitleClick) // click하면 handleTitleClick 함수가 동작하길 원함
h1.addEventListener("mouseenter", handleMouseEnter)
h1.addEventListener("mouseleave", handleMouseLeave)
// not recommend
h1.onclick = handleTitleClick
h1.onmouseenter = handleMouseEnter
h1.onmouseleave = handleMouseLeave
// window 객체 - 기본 제공
window.addEventListener("resize", handleWindowResize)
window.addEventListener("copy", handleWindowCopy)
window.addEventListener("offline", handleWindowOffline)
window.addEventListener("online", handleWindowOnline)
'Front-end > Vanila JS' 카테고리의 다른 글
[JS] CSS in JS (0) | 2024.04.25 |
---|---|
[JS] Console 객체 (0) | 2024.04.24 |
[JS] HTML in JS (document 객체) 📌 (0) | 2023.12.21 |
[JS] Conditionals 조건문 (0) | 2023.12.15 |
[JS] Data Types & Variables 자료형과 변수 (0) | 2023.12.13 |