Jquery mouseenter () vs mouseover ()

Jadi setelah membaca pertanyaan yang baru dijawab saya tidak jelas apakah saya benar-benar memahami perbedaan antara mouseenter()dan mouseover(). Status pos

MouseOver ():

Akan menyala saat memasukkan elemen dan setiap kali gerakan mouse terjadi di dalam elemen.

MouseEnter ():

Akan menyala saat memasuki elemen.

Saya datang dengan biola yang menggunakan keduanya dan mereka tampaknya sangat mirip. Bisakah seseorang tolong jelaskan kepada saya perbedaan antara keduanya?

Saya juga mencoba membaca definisi JQuery, keduanya mengatakan hal yang sama.

Acara mouseover dikirim ke elemen ketika pointer mouse memasuki elemen

Acara mouseenter dikirim ke suatu elemen ketika pointer mouse memasuki elemen.

Bisakah seseorang tolong klarifikasi dengan sebuah contoh?

Anda melihat perilaku ketika elemen target Anda berisi elemen anak:

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

Setiap kali mouse Anda memasuki atau meninggalkan elemen anak, mouseoverdipicu, tetapi tidak 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>

Ini adalah salah satu contoh terbaik yang saya temukan:

• mouseenter
• mouseover
• mouseout
• mouseleave

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

Meskipun mereka beroperasi dengan cara yang sama, bagaimanapun, mouseenterperistiwa hanya memicu ketika pointer mouse memasuki elemen yang dipilih . The mouseoverevent dipicu jika pointer mouse memasuki setiap elemen anak juga .

Lihat contoh kode dan demo di bagian bawah halaman dokumentasi jquery:

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

... mouseover menyala ketika pointer bergerak ke elemen turunan juga, sedangkan mouseenter menyala hanya ketika pointer bergerak ke elemen terikat.

The mouseenter acara berbeda dari mouseover dalam cara menangani acara menggelegak . Peristiwa mouseenter , hanya memicu penangannya ketika mouse memasuki elemen yang terikat padanya, bukan turunan . Rujuk: https://api.jquery.com/mouseenter/

The mouseleave acara berbeda dari mouseout dalam cara menangani acara menggelegak . Acara mouseleave , hanya memicu penangannya ketika mouse meninggalkan elemen yang terikat, bukan keturunan . Rujuk: https://api.jquery.com/mouseleave/

Contoh ini menunjukkan perbedaan antara peristiwa mousemove , mouseenter dan 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 : terjadi setiap kali pointer mouse dipindahkan ke elemen div.
• onmouseenter : hanya terjadi ketika pointer mouse memasuki elemen div.
• onmouseover : terjadi ketika pointer mouse memasuki elemen div, dan elemen turunannya (p dan span).

Pertanyaan lama, tetapi masih belum ada jawaban terbaru yang bagus dengan wawasan imo.

Saat ini, semua browser mendukung mouseover/mouseoutdan mouseenter/mouseleave. Meskipun demikian, jQuery tidak mendaftarkan handler Anda mouseenter/mouseleave, tetapi diam-diam menempatkannya pada pembungkus mouseover/mouseoutseperti yang ditunjukkan kode berikut dan membuat interpretasinya sendiri yang sedikit berbeda mouseenter/mouseleave.

Perilaku persis peristiwa sangat relevan pada "penangan delegasi". Sayangnya, jQuery juga memiliki interpretasi yang berbeda tentang apa yang menjadi penangan delegasi dan apa yang harus mereka terima untuk acara. Fakta itu ditunjukkan dalam jawaban lain untuk acara klik yang lebih sederhana.

Jadi bagaimana cara menjawab pertanyaan tentang jQuery dengan benar, yang menggunakan kata-kata Javascript untuk acara dan penangan, tetapi membuat keduanya berbeda dan bahkan tidak menyebutkannya dalam dokumentasinya?

Pertama perbedaan dalam Javascript "asli":

• kedua
  • mouse dapat "melompat" dari elemen luar / luar ke elemen dalam / terdalam ketika bergerak lebih cepat daripada browser mengambil sampel posisinya
  • ada enter/overyang sesuai leave/out(mungkin terlambat / gelisah)
  • acara pergi ke elemen yang terlihat di bawah pointer (tidak terlihat → tidak dapat menjadi target)
• mouseenter/mouseleave
  • dikirimkan ke elemen tempat terdaftar (target)
  • kapan saja elemen atau keturunan apa pun (misalnya dengan melompat) dimasukkan / kiri
  • itu tidak bisa menggelembung, karena secara konseptual keturunan dianggap sebagai bagian dari unsur yang dimaksud, yaitu tidak ada anak dari mana peristiwa lain dapat berasal (dengan arti "masuk / pergi" orang tua ?!)
  • anak-anak juga mungkin memiliki penangan yang sama yang terdaftar, yang masuk / pergi dengan benar, tetapi tidak terkait dengan siklus masuk / keluar orang tua
• mouseover/mouseout
  • target adalah elemen aktual di bawah pointer
    • target tidak boleh dua hal: yaitu bukan orang tua dan anak pada saat yang sama
  • acara tidak bisa "bersarang"
    • sebelum seorang anak bisa "overed", orang tua perlu "keluar"
  • dapat menggelembung, karena target / relatedTarget menunjukkan di mana peristiwa itu terjadi

Setelah beberapa pengujian, ini menunjukkan bahwa selama Anda tidak menggunakan jQuery "delegate handler with pendaftaran pemilih", emulasi tidak perlu tetapi masuk akal: Ini menyaring mouseover/mouseoutperistiwa yang mouseenter/mouseleavetidak akan didapat. Targetnya berantakan. Real mouseenter/mouseleaveakan memberikan elemen pawang sebagai target, emulasi mungkin mengindikasikan anak-anak dari elemen itu, yaitu apa pun yang mouseover/mouseoutdibawa.

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>