JavaScript Event

JavaScript는 이벤트를 제어하기 위해 사용한다. 

 

이벤트 리스너 추가

EventTarget.addEventListener(이벤트 명, 적용 function)
//원하는 DOM 엘리먼트를 넣으면 된다.

*function의 경우 function()이라고 쓰면 페이지 로딩시 바로 호출된다.
 function명만 적어줘야 이벤트 발생시 호출 된다.

 

event 객체

event를 다룰 function을 만들때마다 JS는 event 객체를 function에 붙인다. 이를 통해 function제어를 한다.

function handleResize(event){
  console.log(event);
}
//event를 제어하기 위해 event parameter를 사용함
window.addEventListener("resize", handleResize);

 

이벤트 적용 예시

const title = document.querySelector('h2');
const superEventHandler = {
  handleMouseOver : function(){
    title.innerHTML = "The mouse is here!";
    title.style.color = colors[0];
  },
  handleMouseOut : function(){
    title.innerHTML = "The mouse is gone!";
    title.style.color = colors[1];
  },
  handleResize : function(){
    title.innerHTML = "You just resized!";
    title.style.color = colors[2];
  },
  handleContextMenu : function(){
    title.innerHTML = "That was a right click!";
    title.style.color = colors[3];
  }
};
title.addEventListener('mouseover', superEventHandler.handleMouseOver);
title.addEventListener('mouseout', superEventHandler.handleMouseOut);
window.addEventListener('resize', superEventHandler.handleResize);
window.addEventListener('contextmenu', superEventHandler.handleContextMenu);

*특이사항

mouseover/out : 자식영역 포함
mouseenter/leave : 자식영역 제외

 

참조

EventTarget.addEventListener()

이벤트 참조