jquery mouseenter（）とmouseover（）

したがって、最近回答された質問を読んだ後、mouseenter()との違いを本当に理解しているかどうかはわかりませんmouseover()。投稿の状態

マウスオーバー（）：

要素に入ると、要素内でマウスの動きが発生するたびに発生します。

MouseEnter（）：

要素に入ると発砲します。

私は両方を使用するフィドルを思いつきました、そしてそれらはかなり似ているようです。誰かが私に2つの違いを説明できますか？

私はまた、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>

これは私が見つけた最良の例の1つです。

• マウス入力
• マウスオーバー
• マウスアウト
• ねずみ

http://bl.ocks.org/mbostock/5247027

ただし、同じように動作しますが、mouseenterイベントは、マウスポインターが選択した要素に入ったときにのみトリガーされます。このmouseoverイベントは、マウスポインターが子要素にも入るとトリガーされます。

jqueryドキュメントページの下部にあるサンプルコードとデモをご覧ください。

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

... mouseoverは、ポインターが子要素に移動したときにも発生しますが、mouseenterは、ポインターがバインドされた要素に移動したときにだけ発生します。

MouseEnterのイベント異なっからマウスオーバーそれが処理する方法でイベントバブリングを。MouseEnterのイベントは、唯一のトリガー時にそのハンドラをマウスが要素に入り、それがバインドされている、いない子孫を。参照：https : //api.jquery.com/mouseenter/

mouseleaveイベント異なっからマウスアウトそれが処理する方法でイベントバブリングを。mouseleaveイベントは、唯一のトリガー時にそのハンドラをマウスが要素の葉、それがバインドされている、いない子孫を。参照：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
  • ターゲットはポインタの下の実際の要素です
    • ターゲットを2つにすることはできません。つまり、同時に親と子にすることはできません
  • イベントは「ネスト」できません
    • 子供が「オーバー」になる前に、親は「外に出る」必要があります
  • target / relatedTargetはイベントが発生した場所を示すため、バブルする可能性があります

それは除外さ：いくつかのテストの後、それは限り、あなたはjQueryの「セレクタ登録とデリゲートハンドラ」を使用していないようとして、エミュレーションが不要ますが合理的であることを示しているmouseover/mouseoutというイベントを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>