[JS] Events

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)