[다양한 이벤트 알아보기] 05. 마우스 이동 이벤트 II

/**
* [마우스 이동 이벤트]
* 
* > mouseEvent.target
* : 이벤트가 발생한 요소
*
* > mouseEvent.relatedTarget
* : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소
*/

mouseover와 moseout을 살펴보겠습니다.

이벤트 객체의 타입 프로퍼티를 출력하는 이벤트 핸들러를 등록해주면 코드를 실행했을 때 마우스 포인터가 요소 안으로 들어갈 때 mouseover 밖으로 나올 때 mouseout 이벤트가 발생하는 걸 확인할 수 있습니다.

뿐만 아니라 버블링에 의해서 자식 요소끼리도 이벤트 핸들러가 동작하는 모습을 확인할 수가 있습니다.

const box2 = querySelector('#box2');

function printEventData(e) {
  console.log(e.type);
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

그런데 한 가지 주의해야 할 부분은 자세히 보면 요소끼리 이동할 때 mouseout, mouseover 순서대로 이벤트가 두 번 발생하고 있습니다. 

처음에는 좀 헷갈릴 수도 있지만 천천히 생각해 보면 마우스가 이동할 때 직전 요소에서 빠져나올 때 mouseout이 발생하고 다음 요소로 들어갈 때 mouseover가 발생한 겁니다.

그래서 이런 원리를 잘 이해하고서 이런식으로 toggle 메소드를 활용하면 mouseover에서 클래스가 추가되고 mouseout에서 클래스가 삭제되는 방식으로 동작합니다.

const box2 = querySelector('#box2');

function printEventData(e) {
  if(e.target.classList.contains('cell')) {
    e.target.classList.toggle('on')
  }
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

코드를 저장하고 실행해보면 이렇게 자식 요소의 클래스를 toggle을 할 때 mouseover와 mouseout으로 이벤트 위임을 활용할 수도 있습니다.

 

그리고 이 두 개의 이벤트에는 relatedTarget이라는 조금 특별한 이벤트 객체의 프로퍼티가 있습니다.

이미 살펴봤었던 target 프로퍼티는 이벤트가 발생한 요소를 담고 있는 반면에 relatedTarget은 이벤트가 발생하기 직전 또는 직후의 마우스가 위치해 있던 요소를 담고 있습니다. 그래서 이벤트 핸들러를 이렇게 수정하고 실행해보면 요소끼리 마우스 이동 경로를 파악할 때도 유용하게 활용할 수가 있습니다.

const box2 = querySelector('#box2');

function printEventData(e) {
  console.log('event:' e.type);
  console.log('target:' e.target);
  console.log('relatedTarget:', e.relatedTarget);
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

콘솔에 찍힌 값들을 조금 살펴보면 mouseover 일 때 target이 box2이고 relatedTarget이 cell-4니까 cell-4에서 box2로 마우스가 이동했다는 것을 파악할 수 있습니다. mouseout의 경우에는 target이 box2이고 relatedTarget이 body니까 box에서 body로 이동했다는 것을 파악할 수 있습니다. 꼭 이동경로를 이렇게 파악하지 않더라도 이벤트 타입이 mouseover일 때는 마우스가 이동하기 직전의 요소 그리고 mouseout일 경우에는 마우스가 이동한 직후의 요소를 편리하게 다룰 수 있기 때문에 잘 기억해두었다가 필요한 상황에 따라 적절하게 활용하면 좋을 것 같습니다.