마우스 오버 이벤트와 마우스 입력 이벤트의 차이점은 무엇입니까?

마우스 오버 이벤트와 마우스 입력 이벤트의 차이점은 무엇입니까?

항상 사용해 왔습니다.mouseover이벤트, 하지만 jQuery 설명서를 읽는 동안 발견했습니다.mouseenter그들은 정확히 같은 기능을 하는 것처럼 보입니다.

둘 사이에 차이가 있나요, 그렇다면 언제 사용해야 하나요?
(또한 에도 적용됨mouseout대mouseleave).

jQuery doc 페이지에서 다음 예제를 사용해 볼 수 있습니다.이것은 아주 명확하게 하고 실제로 직접 볼 수 있는 멋지고 작은 상호작용적인 데모입니다.

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

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

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

간단히 말해서, 마우스 오버 이벤트는 요소 위에 있을 때 요소 위에서 발생합니다. 즉, 하위 요소 또는 상위 요소에서 발생하지만 마우스 입력 이벤트는 마우스가 이 요소 밖에서 이 요소로 이동할 때만 발생합니다.

또는 의사들이 말했듯이:

[.mouseover()] 이벤트 버블링으로 인해 많은 두통을 유발할 수 있습니다.예를 들어, 이 예에서 마우스 포인터가 Inner 요소 위로 이동하면 마우스 오버 이벤트가 해당 요소로 전송된 다음 Outer로 유입됩니다.이로 인해 부적절한 시간에 바인딩된 마우스 오버 핸들러가 트리거될 수 있습니다.다음 항목에 대한 토론 참조.mouseenter()유익한 대안으로

마우스 입력 및 마우스 탈퇴는 이벤트 버블링에 반응하지 않지만 마우스 오버 및 마우스 아웃은 반응합니다.

여기 그 행동을 설명하는 기사가 있습니다.

이와 같은 질문에 종종 해당되는 것처럼 Quirksmode가 가장 좋은 답변을 제공합니다.

저는 jQuery의 목표 중 하나가 브라우저에 구애받지 않도록 만드는 것이기 때문에 두 이벤트 이름 중 하나를 사용하면 동일한 동작이 발생한다고 생각합니다. 편집: 다른 게시물 덕분에, 저는 이제 이것이 사실이 아니라는 것을 알게 되었습니다.

$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });

언급URL : https://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events