jquery mouseenter () 대 mouseover ()

그래서 최근에 답변 된 질문 을 읽은 후 mouseenter()와 의 차이점을 실제로 이해하고 있는지 확실하지 않습니다 mouseover(). 게시물 상태

MouseOver () :

요소에 들어가거나 요소 내에서 마우스 움직임이 발생할 때마다 발생합니다.

MouseEnter () :

요소를 입력하면 발사됩니다.

나는 두 가지를 모두 사용 하는 바이올린을 생각해 냈고 꽤 비슷해 보입니다. 누군가 나에게 둘 사이의 차이점을 설명해 줄 수 있습니까?

나는 또한 JQuery 정의를 읽으려고 노력했다. 둘 다 같은 것을 말한다.

마우스 포인터가 요소에 들어가면 mouseover 이벤트가 요소로 전송됩니다.

마우스 포인터가 요소에 들어가면 mouseenter 이벤트가 요소로 전송됩니다.

누군가 예를 들어 설명해 주시겠습니까?

대상 요소에 하위 요소가 포함 된 경우 동작이 표시됩니다.

http://jsfiddle.net/ZCWvJ/7/

마우스가 자식 요소를 입력하거나 떠날 때마다 mouseover트리거되지만 트리거되지는 않습니다 mouseenter.

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});

#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

이것은 내가 찾은 최고의 예 중 하나입니다.

• 마우스
• 마우스 오버
• 마우스 아웃
• 쥐잎

http://bl.ocks.org/mbostock/5247027

그러나 동일한 방식으로 작동하지만 마우스 포인터가 선택한 요소에 들어갈mouseenter 때만 이벤트가 트리거됩니다 . mouseover이벤트가 트리거됩니다 마우스 포인터뿐만 아니라 자식 요소를 입력하면 .

jquery 문서 페이지 하단의 예제 코드 및 데모를 참조하십시오.

http://api.jquery.com/mouseenter/

... 마우스 오버는 포인터가 자식 요소로 움직일 때 발생하지만 마우스 입력기는 포인터가 바인딩 된 요소로 움직일 때만 발생합니다.

mouseenter의 이벤트 다릅니다 에서 마우스 오버 가 처리하는 방식의 이벤트 버블 링을 . mouseenter의 이벤트 만 트리거 때 핸들러를 마우스 요소 입력 이,에 바인딩 하지 후손 . 참조 : https://api.jquery.com/mouseenter/

하여 MouseLeave 이벤트 다릅니다 에서 마우스를 이동하면 그것을 처리하는 방법으로 이벤트 버블 링을 . 하여 MouseLeave 이벤트는 만 트리거 때 핸들러를 마우스 요소 잎 이,에 바인딩 하지 후손 . 참조 : https://api.jquery.com/mouseleave/

이 예제는 mousemove , mouseenter 및 mouseover 이벤트 의 차이점을 보여줍니다 .

https://jsfiddle.net/z8g613yd/

HTML :

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS :

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS :

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

• onmousemove : 마우스 포인터가 div 요소 위로 이동할 때마다 발생합니다.
• onmouseenter : 마우스 포인터가 div 요소에 들어갈 때만 발생합니다.
• onmouseover : 마우스 포인터가 div 요소 및 해당 하위 요소 (p 및 span)에 들어갈 때 발생합니다.

오래된 질문이지만 여전히 통찰력이있는 최신 답변은 없습니다.

요즘 모든 브라우저는 mouseover/mouseout및을 지원 mouseenter/mouseleave합니다. 그럼에도 불구하고 jQuery는 핸들러를에 등록하지는 않지만 다음 코드가 표시하고 자체적으로 약간 다른 해석을 수행 mouseenter/mouseleave하므로 래퍼에 자동 mouseover/mouseout으로 배치합니다 mouseenter/mouseleave.

이벤트의 정확한 동작은 특히 "대리자 처리기"와 관련이 있습니다. 불행히도 jQuery는 델리게이트 핸들러가 무엇이고 이벤트에 대해 무엇을 받아야하는지에 대한 자체 해석이 다릅니다. 이 사실은 더 간단한 클릭 이벤트에 대한 또 다른 답변 에 표시됩니다 .

그렇다면 이벤트와 핸들러에 Javascript 단어를 사용하지만 문서와는 달리 jQuery에 대한 질문에 올바르게 대답하는 방법은 무엇입니까?

먼저 "실제"Javascript의 차이점 :

• 양자 모두
  • 브라우저가 위치를 샘플링하는 것보다 빠르게 이동할 때 마우스가 외부 / 외부 요소에서 내부 / 가장 안쪽 요소로 "점프"할 수 있습니다.
  • 모두 enter/over상응하는 것을 얻습니다 leave/out(아마 늦거나 점프)
  • 이벤트는 포인터 아래 보이는 요소로 이동합니다 (보이지 않음 → 대상이 될 수 없음)
• mouseenter/mouseleave
  • 등록 된 요소에 전달됨 (대상)
  • 요소 나 자손 (예 : 점프)이 들어 오거나 떠날 때마다
  • 개념적으로 하위 요소는 문제의 요소의 일부로 간주되기 때문에 거품이 발생하지 않습니다. 즉, 다른 이벤트가 발생할 수있는 자식이 없습니다 (부모가 "입력 / 왼쪽"의 의미로?).
  • 어린이들도 비슷한 처리기가 등록되어있을 수 있습니다.이 핸들러는 올바르게 입력 / 탈퇴하지만 부모의 입력 / 탈출주기와 관련이 없습니다.
• mouseover/mouseout
  • 대상은 포인터 아래의 실제 요소입니다
    • 대상은 두 가지가 될 수 없습니다. 즉, 부모와 자식이 동시에되지 않습니다
  • 이벤트는 "중첩"할 수 없습니다
    • 아이가“과로 넘어지기”전에 부모는“나가야”합니다
  • target / relatedTarget이 이벤트가 발생한 위치를 나타내므로 버블 링 가능

일부 테스트 후 jQuery "선택기 등록과 함께 델리게이트 핸들러"를 사용하지 않는 한 에뮬레이션은 불필요하지만 합리적입니다. 얻을 수없는 mouseover/mouseout이벤트를 필터링합니다 mouseenter/mouseleave. 그러나 대상은 엉망입니다. 실제 mouseenter/mouseleave는 처리기 요소를 대상으로 제공하고 에뮬레이션은 해당 요소의 하위 항목, 즉 mouseover/mouseout운반 된 항목을 나타낼 수 있습니다 .

const list = document.getElementById('log');
const outer = document.getElementById('outer');
const $outer = $(outer);

function log(tag, event) {
  const li = list.insertBefore(document.createElement('li'), list.firstChild);
  // only jQuery handlers have originalEvent
  const e = event.originalEvent || event;
  li.append(`${tag} got ${e.type} on ${e.target.id}`);
}

outer.addEventListener('mouseenter', log.bind(null, 'JSmouseenter'));
$outer.on('mouseenter', log.bind(null, '$mouseenter'));

div {
  margin: 20px;
  border: solid black 2px;
}

#inner {
  min-height: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id=outer>
    <ul id=log>
    </ul>
  </div>
</body>