쿼리 마우스 입력() vs 마우스 오버()

쿼리 마우스 입력() vs 마우스 오버()

그래서 최근에 대답된 질문을 읽고 난 후에 나는 정말로 그 차이를 이해하는지 확실하지 않습니다.mouseenter()그리고.mouseover()에. 게시글에 다음과 같이 나와 있습니다.

마우스오버():

요소를 입력할 때와 요소 내에서 마우스 움직임이 발생할 때마다 실행됩니다.

마우스 엔터():

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

둘 다 사용하는 바이올린을 생각해 냈는데 꽤 비슷한 것 같습니다.누가 나에게 그 둘의 차이점을 설명해 줄 수 있습니까?

저도 JQuery 정의를 읽어봤는데 둘 다 같은 말을 합니다.

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

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

누가 예를 들어 설명해 줄 수 있습니까?

대상 요소에 하위 요소가 포함된 경우 동작을 볼 수 있습니다.

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>

하지만은 mouseenter이벤트는 마우스 포인터가 선택된 요소에 들어갈 때만 트리거합니다.mouseover마우스 포인터가 하위 요소에도 들어가면 이벤트가 트리거됩니다.

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

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

... 포인터가 자식 요소로 이동할 때도 마우스 오버가 실행되고, 포인터가 경계 요소로 이동할 때만 마우스가 실행됩니다.

마우스 입력 이벤트는 이벤트 버블링을 처리하는 방식이 마우스 오버와 다릅니다.마우스 입력 이벤트는 하위 항목이 아닌 바인딩된 요소에 마우스가 들어갈 때만 핸들러를 트리거합니다.참조: https://api.jquery.com/mouseenter/

마우스 이탈 이벤트는 이벤트 버블링을 처리하는 방식이 마우스 아웃과 다릅니다.마우스 이탈 이벤트는 하위 항목이 아니라 마우스가 바인딩된 요소를 떠날 때만 핸들러를 트리거합니다.참조: https://api.jquery.com/mouseleave/

다음 예제에서는 마우스 이동, 마우스 엔터 및 마우스 오버 이벤트 간의 차이를 보여 줍니다.

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)에 들어갈 때 발생합니다.

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

jQuery는 이벤트 및 핸들러에 대해 자바스크립트 문구를 사용하지만 문서화되지 않은 자체적인 해석을 수행하므로, 순수한 자바스크립트 관점과의 차이점을 먼저 알아보겠습니다.

• 두 이벤트 쌍
  • 브라우저가 위치를 샘플링하는 것보다 빠르게 이동할 때 마우스는 외부/outer 요소에서 내부/내부 요소로 "jump"할 수 있습니다.
  • 조금도enter/over다를 .leave/outp리트리)
  • 이벤트는 포인터 아래에 보이는 요소로 이동합니다(invisible 요소는 대상이 될 수 없음).
• mouseenter/mouseleave
  • 버블이 발생하지 않음(이벤트가 딜러 핸들러에 유용하지 않음)
  • 이벤트 등록 자체가 관찰과 추상화의 영역을 정의합니다.
  • 연못이 있는 공원과 같이 대상 지역에 대한 작업: 연못은 공원의 일부로 간주됩니다.
  • 이벤트는 요소 자체 또는 하위 요소가 처음 입력/종료될 때마다 대상/영역에 표시됩니다.
  • 항목을 한 항목에서 항목으로 해도 하거나, 하거나, /가 완료.mouseenter/mouseleave 없음 클즉,음)
  • 하나의 핸들러로 여러 영역을 관찰하려면 각 영역/element에 등록하거나 다음에 논의되는 다른 이벤트 쌍을 사용합니다.
  • 의 할 수 인 /인 와 을 만들 수 있습니다.mouseenter/mouseleave
  • ,mouseenter/mouseleave고 같은 걸 될 mouseover/mouseout
• mouseover/mouseout
  • 이벤트 버블
  • 포인터 아래의 요소가 변경될 때마다 이벤트가 실행됩니다.
    • mouseout에서.
    • 를 이어 mouseover
    • 이벤트는 "둥지"가 아닙니다. 예를 들어 아이가 "과식"되기 전에 부모는 "밖"으로 나갈 것입니다.
  • target/relatedTarget 및 다를 .
  • 만약 당신이 다른 지역을 보고 싶다면.
    • 하나의 핸들러를 공통 부모(또는 여러 부모)에 등록합니다. 이들은 함께 시청하고 싶은 모든 요소를 다룹니다.
    • 있는 .$(event.target).closest(...)필요에 따라

그리 사소하지 않은mouseover/mouseout예:

$('.side-menu, .top-widget')
  .on('mouseover mouseout', event => {
    const target = event.type === 'mouseover' ? event.target : event.relatedTarget;
    const thing = $(target).closest('[data-thing]').attr('data-thing') || 'default';
    // do something with `thing`
  });

요즘은 모든 브라우저가 지원합니다.mouseover/mouseout그리고.mouseenter/mouseleave토속적으로그럼에도 불구하고, jQuery는 당신의 핸들러를 등록하지 않습니다.mouseenter/mouseleave, 조용히 포장지 위에 올려놓기만 하면mouseover/mouseout아래의 암호가 밝히듯이

이 에뮬레이션은 불필요하고 불완전하며 CPU 주기의 낭비입니다. 즉, 필터링합니다.mouseover/mouseout일이 있는 일.mouseenter/mouseleave얻을 수는 없겠지만,target엉망진창입니다.진짜mouseenter/mouseleave핸들러 요소를 대상으로 제공할 것이고, 에뮬레이션은 그 요소의 자식을 나타낼 수 있습니다. 즉, 무엇이든.mouseover/mouseout운반된.

이러한 이유로 저는 해당 이벤트에 jQuery를 사용하지 않지만, 예를 들어:

$el[0].addEventListener('mouseover', e => ...);

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>

---

참고: 위임 처리기의 경우 jQuery의 "선택기 등록이 있는 위임 처리기"를 사용하지 않습니다.(다른 답변의 이유)다음(또는 유사)을 사용합니다.

$(parent).on("mouseover", e => {
  if ($(e.target).closest('.gold').length) {...};
});

대신에

$(parent).on("mouseover", '.gold', e => {...});

언급URL : https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover