Jquery mouseenter () vs mouseover ()

Quindi, dopo aver letto una domanda a cui è stata data una risposta recente , non sono chiaro se capisco davvero la differenza tra mouseenter()e mouseover(). La posta afferma

MouseOver ():

Sparerà entrando in un elemento e ogni volta che si verificano movimenti del mouse all'interno dell'elemento.

MouseEnter ():

Sparerà entrando in un elemento.

Ho inventato un violino che usa entrambi e sembrano essere abbastanza simili. Qualcuno può spiegarmi la differenza tra i due?

Ho anche provato a leggere le definizioni di JQuery, entrambe dicono la stessa cosa.

L'evento mouseover viene inviato a un elemento quando il puntatore del mouse entra nell'elemento

L'evento mouseenter viene inviato a un elemento quando il puntatore del mouse entra nell'elemento.

Qualcuno può chiarire con un esempio?

Si vede il comportamento quando l'elemento target contiene elementi figlio:

http://jsfiddle.net/ZCWvJ/7/

Ogni volta che il mouse entra o esce da un elemento figlio, mouseoverviene attivato, ma non 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>

Questo è uno dei migliori esempi che ho trovato di:

• MouseEnter
• mouseover
• mouseout
• mouseLeave

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

Sebbene funzionino allo stesso modo, tuttavia, l' mouseenterevento si attiva solo quando il puntatore del mouse entra nell'elemento selezionato . L' mouseoverevento viene attivato se un puntatore del mouse immette anche elementi figlio .

Vedi il codice di esempio e la demo in fondo alla pagina della documentazione di jquery:

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

... mouseover viene attivato anche quando il puntatore si sposta nell'elemento figlio, mentre mouseenter viene attivato solo quando il puntatore si sposta nell'elemento associato.

L' evento mouseenter differisce dal passaggio del mouse per il modo in cui gestisce il gorgogliamento degli eventi . L' evento mouseenter , attiva il suo gestore solo quando il mouse entra nell'elemento a cui è legato, non in un discendente . Consultare: https://api.jquery.com/mouseenter/

L' evento mouseleave differisce dal mouseout per il modo in cui gestisce il gorgogliamento degli eventi . L' evento mouseleave , attiva il suo gestore solo quando il mouse lascia l'elemento a cui è legato, non un discendente . Consultare: https://api.jquery.com/mouseleave/

Questo esempio dimostra la differenza tra gli eventi mousemove , mouseenter e 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 : si verifica ogni volta che si sposta il puntatore del mouse sull'elemento div.
• onmouseenter : si verifica solo quando il puntatore del mouse entra nell'elemento div.
• onmouseover : si verifica quando il puntatore del mouse entra nell'elemento div e nei suoi elementi figlio (p e span).

Vecchia domanda, ma ancora nessuna buona risposta aggiornata con insight imo.

In questi giorni, tutti i browser supportano mouseover/mouseoute mouseenter/mouseleave. Tuttavia, jQuery non registra il gestore su mouseenter/mouseleave, ma li mette silenziosamente in un involucro mouseover/mouseoutcome mostra il codice seguente e ne fa una interpretazione leggermente diversa mouseenter/mouseleave.

L'esatto comportamento degli eventi è particolarmente rilevante per i "gestori delegati". Sfortunatamente, jQuery ha anche una sua diversa interpretazione di cosa sono i gestori delegati e cosa dovrebbero ricevere per gli eventi. Questo fatto è mostrato in un'altra risposta per l'evento click più semplice.

Quindi, come rispondere correttamente a una domanda su jQuery, che utilizza la formulazione Javascript per eventi e gestori, ma rende entrambi diversi e non lo menziona nemmeno nella sua documentazione?

Innanzitutto le differenze nel Javascript "reale":

• tutti e due
  • il mouse può "saltare" dagli elementi esterni / esterni agli elementi interni / più interni quando viene spostato più velocemente rispetto a quando il browser ne campiona la posizione
  • qualsiasi enter/overottiene un corrispondente leave/out(possibilmente in ritardo / jumpy)
  • gli eventi vanno all'elemento visibile sotto il puntatore (invisibile → non può essere target)
• mouseenter/mouseleave
  • viene consegnato all'elemento in cui è stato registrato (target)
  • ogni volta che l'elemento o qualsiasi discendente (ad esempio saltando) viene inserito / lasciato
  • non può bolle, perché concettualmente i discendenti sono considerati parte dell'elemento in questione, cioè non ci sono bambini da cui potrebbe provenire un altro evento (con il significato di "entrato / lasciato" il genitore ?!)
  • i bambini potrebbero anche avere gestori simili registrati, che entrano / escono correttamente, ma non sono collegati al ciclo di entrata / uscita dei genitori
• mouseover/mouseout
  • l'obiettivo è l'elemento reale sotto il puntatore
    • un obiettivo non può essere due cose: vale a dire non genitore e figlio contemporaneamente
  • l'evento non può "nidificare"
    • prima che un bambino possa essere “esagerato”, il genitore deve “uscire”
  • può bolle, perché target / relatedTarget indica dove si è verificato l'evento

Dopo alcuni test, mostra che fintanto che non si utilizzano jQuery "gestori delegati con registrazione selettore", l'emulazione non è necessaria ma ragionevole: filtra gli mouseover/mouseouteventi che mouseenter/mouseleavenon si otterrebbero. Il bersaglio però è incasinato. Il reale mouseenter/mouseleavedarebbe l'elemento gestore come bersaglio, l'emulazione potrebbe indicare i figli di quell'elemento, vale a dire qualunque sia il mouseover/mouseoutportato.

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>