EventListener

 

console.dir(xxxx);
xxxx needs to be defined

위 명령어를 실행하면 directory가 console에 뜨는데, 여기서 on으로 시작하는것을 적용할 수 있다. Ex, onmouseenter같은경우 VSC에서는 on를 뺴고 title.addEventListener("mouseenter", )를 실행할 수 있다.

 

const title = document.querySelector(".hello h1");

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

title.addEventListener("click", handleTitleClick);

위에 코드를 해석하자면, 

when somebody "clicks" on the title("which is .hello h1") then, run "handleTitleClick" function, which would turn the color to blue.

const h1 = document.querySelector(".hello h1");

function handleTitleClick() {
  if (h1.style.color === "blue") {
    h1.style.color = "tomato";
  } else {
    h1.style.color = "blue";
  }
}

h1.addEventListener("click", handleTitleClick);

위에 코드를 해석하자면, 

when somebody "clicks" on the h1 then, run "handleTitleClick" function.

"handleTitleClick" function should change the h1 color to blue if the color isn't blue, if it is blue then change the color to tomato upon clicking h1.