[Web API] Mouse 이벤트, Touch 이벤트

📌 onMouseMove

마우스 포인터가 요소 위에 놓여졌거나 움직일 때 작동한다.

const Example() {
  
  const big = (x) => {
    x.style.width = '64px';
    x.style.height = '64px';
  }
  
  return (
    <img onMouseMove={big(this)} src="smile.gif" style={{width: "32px", height: "32px"}} />
  )

📌 onMouseEnter

마우스 포인터가 요소 안으로 들어올 때 작동한다.
(외부에서 내부로 이동)

const Example() {
  
  const big = (x) => {
    x.style.width = '64px';
    x.style.height = '64px';
  }
  
  return (
    <img onMouseEnter={big(this)} src="smile.gif" style={{width: "32px", height: "32px"}} />
  )

📌 onMouseLeave

마우스 포인터가 요소에서 이동할 때 작동한다.
(내부에서 외부로 이동)

const Example() {
  
  const big = (x) => {
    x.style.width = '64px';
    x.style.height = '64px';
  }
  
  return (
    <img onMouseLeave={big(this)} src="smile.gif" style={{width: "32px", height: "32px"}} />
  )

📌 onMouseMove, onMouseEnter, onMouseLeave의 차이점

• onMouseOver, onMouseOut : 자식 요소에 접근해도 동작한다. (이벤트 버블링 발생)
• onMouseEnter, onMouseLeave : 자식 요소에는 동작하지 않는다.

📌 onTouchEnd

스크린에서 손가락을 뗄 때 발생한다.

< 참고 : https://yoonsidae.tistory.com/13 >