JavaScript2_마우스 이동 이벤트2

/** 
 * [마우스 이동 이벤트]
 * 
 * > MouseEvent.type
 * mousemove: 마우스 포인터가 움직일 때
 * mouseover: 마우스 포인터가 요소 밖에서 안으로 움직일 때
 * mouseout: 마우스 포인터가 요소 안에서 밖으로 움직일 때 
 * 
 * > MouseEvent.target
 * : 이벤트가 발생한 요소
 * 
 * > MouseEvent.relatedTarget
 * : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소
 */

 //이벤트 타입이 mouseover 일 때는 마우스가 이동하기 직전의 요소 그리고 mouseout 일 경우에는
//마우스가 이동한 직후의 요소를 편리하게 다룰 수 있기 때문에 잘 기억하고 적절하게 활용하기!!

const box2 = document.querySelector('#box2');

function printEventData(e) {
  console.log('event:', e.type);
  console.log('target:', e.target);
  console.log('relatedTarget:', e.relatedTarget);
  console.log('------------------------------------');
  if (e.target.classList.contains('cell')) { 
    e.target.classList.toggle('on');//마우스오버에서 클래스 추가, 마우스아웃에서 클래스 삭제
  }
}