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

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

둘 사이에 차이가 있습니까? 그렇다면 언제 사용해야합니까?
( mouseout대 에도 적용 mouseleave).

답변

jQuery 문서 페이지 에서 다음 예제를 시도해 볼 수 있습니다 . 아주 명확하고 대화식 데모이며 실제로 볼 수 있습니다.

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()

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

답변

Mouseenter와 mouseleave 는 이벤트 버블 링에 반응 하지 않지만 mouseover와 mouseout 은 반응합니다 .

다음 은 동작을 설명 하는 기사 입니다.

답변

이와 같은 질문에서 종종 그렇듯이 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);})
 });