mouseEnter&mouseLeave와 mouseOver&mouseOut의 차이

 

 

---

[mouseEnter&mouseLeave]

 

import { useState } from "react";
import './EventCompare.css'

const EventCompare = () => {
 const [result, setResult] = useState('');

 const handleIn = e => setResult(r => `${r}Enter: ${e.target.id}<br/>`);
 const handleOut = e => setResult(r => `${r}Leave: ${e.target.id}<br/>`);

 return (
  <>
   <div id="outer"
    onMouseEnter={handleIn}
    onMouseLeave={handleOut}
   >
    외부 (outer)

    <p id="inner">
     내부(inner)
    </p>

   </div>
   <div dangerouslySetInnerHTML={{ __html: result }}></div>
  </>
 )
}

export default EventCompare;

 

 

react 소스를 보면 

outer에만 이벤트를 걸어놨다.

 

 

 

 

수평으로 마우스가 지나간다고 할 때 

결과값은 아래와 같다

inner에 mouseEnter가 되어도

감지가 안된다. 

 

mouseOver&mouseOut를 살펴보자

 

---

 

[mouseOver&mouseOut]

import { useState } from "react";
import './EventCompare.css'

const EventCompare = () => {
 const [result, setResult] = useState('');

 const handleIn = e => setResult(r => `${r}Enter: ${e.target.id}<br/>`);
 const handleOut = e => setResult(r => `${r}Leave: ${e.target.id}<br/>`);

 return (
  <>
   <div id="outer"
    onMouseOver={handleIn} // <<<<<<<<<<<< 여기바뀜
    onMouseOut={handleOut} // <<<<<<<<<<<< 여기바뀜
   >
    외부 (outer)

    <p id="inner">
     내부(inner)
    </p>

   </div>
   <div dangerouslySetInnerHTML={{ __html: result }}></div>
  </>
 )
}

export default EventCompare;

 

 

1) outer에 Over감지 Out감지

2) inner에 Over감지 Out감지

3) outer에 Over감지 Out감지

 

mouseOver는 캡처링되어

자식요소까지 이벤트가 걸리는 것을 볼 수 있다.