jQuery mouseenter（）vs mouseover（）

所以阅读最近回答后，问题我很清楚，如果我真的明白之间的差别mouseenter()和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，而mouseenter仅在指针移入绑定的元素时，将触发。

该的mouseenter事件不同，从鼠标悬停在它的方式处理事件冒泡。所述的mouseenter事件，仅触发当其处理程序鼠标进入元件它被绑定到，不后代。请参阅：https：//api.jquery.com/mouseenter/

该鼠标离开事件不同，从鼠标移出它的方式处理事件冒泡。该鼠标离开事件，只有触发时，其处理程序鼠标离开元素势必会，不是一个后代。请参阅：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）时发生。

旧问题，但对于imo洞察力仍然没有很好的最新答案。

如今，所有浏览器都支持mouseover/mouseout和mouseenter/mouseleave。不过，jQuery不会将您的处理程序注册到mouseenter/mouseleave，而是mouseover/mouseout按照下面的代码所示静默地将它们放置在包装上，并对它做出自己稍有不同的解释mouseenter/mouseleave。

事件的确切行为在“委托处理程序”上尤其重要。不幸的是，jQuery对什么是委托处理程序以及事件应该接收什么有不同的解释。这个事实在另一个简单点击事件的答案中得到了体现。

那么，如何正确回答有关jQuery的问题呢？jQuery使用Javascript编写事件和处理程序，却又有所不同，甚至在文档中都没有提及？

首先，“真实” JavaScript的区别：

• 都
  • 当鼠标移动的速度快于浏览器采样位置时，鼠标可以从外部/外部元素“跳到”内部/内部元素
  • 任何enter/over得到相应的leave/out（可能是晚/跳跃）
  • 事件进入指针下方的可见元素（不可见→不能成为目标）
• mouseenter/mouseleave
  • 交付给已注册的元素（目标）
  • 每当元素或任何后代输入或离开（例如，通过跳转）时
  • 它不会冒泡，因为从概念上讲，后代被认为是所涉及元素的一部分，即没有子代可能发生其他事件（含义为“进入/离开”父代？！）
  • 子级可能也注册了类似的处理程序，它们可以正确输入/离开，但与父母的输入/离开周期无关
• mouseover/mouseout
  • 目标是指针下方的实际元素
    • 一个目标不能是两件事：即不能同时有父母和孩子
  • 该活动不能“嵌套”
    • 在孩子被“压倒”之前，父母需要“离开”
  • 可能会冒泡，因为target / relatedTarget指示事件发生的位置

经过一些测试，结果表明，只要您不使用jQuery“使用选择器注册的委托处理程序”，该模拟都是不必要的，但很合理：它将过滤掉mouseover/mouseouta 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>