Event

• Event 인터페이스는 DOM 내에 위치한 이벤트를 나타내는 것으로 클릭, 마우스가 올라가거나, 입력을 끝내거나 엔터를 누르는 것들 이 모든 행위가 EVENT이다.

addEventLisener

• JS를 사용하여 Event를 listen 할 수 있다.
• 무슨 event를 listen할 것인지 첫번째 인자로 넘겨준다. 두번 째 인자에 event가 발생할 시 호출할 함수를 전달해준다.
• click이벤트, mouseenter, mouseleave 이벤트

<script>
    const title = document.querySelector(".hello h1");
    function handleTitleClick() {
      alert("just click")
    };
    title.addEventListener("click", handleTitleClick);
</script>

<script>
const title = document.querySelector(".hello h1");
function handleTitleClick(){
  title.style.color = "blue" 
};
function handleMouseEnter(){
  title.innerText = "MOUSE IS HERE" ;
};
function handleMouseLeave(){
  title.innerText = "MOUSE IS GONE" ;
};
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);
</script>

-onevnetname을 이용해서 이벤트를 사용할 수 있다.
-addEventListener를 선호하는 이유는 removeEventListener를 통해 이벤트를 리스너를 제거할 수 도 있기 때문이다.

<script>
title.addEventListener("click", handleTitleClick);
title.onclick = handleTitleClick;
</script>

window interface object

• 브라우저 객체 모델의 최상위 객체
• 웹브라우저의 탭 혹은 창의 모델을 나타내는데, 이러한 웹브라우저 객체 모델의 최상위 객체가 window 객체이다.
• window 객체는 현재 웹브라우저의 창이나 탭을 표현한다.

Document(문서 객체 모델의 최상위 객체)와의 차이는?

• 현재 웹페이지의 모델을 생성하며, 이러한 문서 객체 모델의 최상위 객체가 document 객체이다.
• document 객체는 전체 페이지를 표현한다.

*정리하면 window는 웹브라우저 창, document는 웹브라우저 창 안에 보이는 문서라고 생각하자. 실제로 document 객체는 window 객체의 속성이기도 하다.

<script>
function handleWindowResize(){
  document.body.style.backgroundColor = "tomato";
}
function handleCopy(){
  alert("copier!")
}
function handleWindowOff(){
  alert("off")
}
function handleWindowOn(){
  alert("on")
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleCopy);
window.addEventListener("offline", handleWindowOff);
window.addEventListener("online", handleWindowOn);
</script>