JavaScript Events 2

Event를 사용하는 방법에는 2가지의 방법이 있다!

ㅅㅅㄴㅁㄴㅇ

1) title.addEventListner("click", handleTitleClick )을 사용하는것

2) title.onclick = handleTitleClick

 

const title =  document.querySelector("div.hello:first-child h1"); 

function handleTitleClick() {
    title.style.color = "blue";
}

function handleMouseEnter() {
    title.innerText = "Mouse is here!";
}
function handleMouseLeave() {
    title.innerText = "Mouse is Gone!";
}

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

 

 

HTML element에 window element 에서 창의 크기가 바뀔떄마다 이벤트를 일으키는 이벤트 함수는 resize event 이다

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() {
    document.body.style.backgroundColor = "tomato";
}

h1.addEventListener("click", handleTitleClick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);

 

document에는 body, head , title과 같은것에만 할수 있고

예를 들어 document.div는 불가능하다!

document.getelmentById("h2")

document.querySelector("h2")

 

원리는 똑같다. 

우리는 element를 찾아서 event listner를 추가하고 , event가 발생하면 반응을 해주는것!