jquery mouseenter () 대 mouseover ()

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/

... mouseover fires when the pointer moves into the child element as well, while mouseenter fires only when the pointer moves into the bound element.

---

The mouseenter event differs from mouseover in the way it handles event bubbling. The mouseenter event, only triggers its handler when the mouse enters the element it is bound to, not a descendant. Refer: https://api.jquery.com/mouseenter/

The mouseleave event differs from mouseout in the way it handles event bubbling. The mouseleave event, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. Refer: https://api.jquery.com/mouseleave/

---

This example demonstrates the difference between the mousemove, mouseenter and mouseover events:

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 : occurs every time the mouse pointer is moved over the div element.
• onmouseenter : only occurs when the mouse pointer enters the div element.
• onmouseover : occurs when the mouse pointer enters the div element, and its child elements (p and span).

참고URL : https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover