## Mouseover lwn Mouseenter: Bilakah Anda Harus Menggunakan Setiap Acara?

Memahami Perbezaan antara Peristiwa Tetikus dan Mouseenter

Dalam pembangunan web, acara tuding tetikus dan tetikus selalunya digunakan untuk fungsi berkaitan tuding. Walaupun mereka kelihatan berkelakuan serupa, terdapat perbezaan yang ketara antara keduanya.

Penyebaran Peristiwa

Perbezaan utama antara acara alih tetikus dan masuk tetikus terletak pada penyebaran acara mereka . Tetikus ialah peristiwa menggelegak yang menyebarkan hierarki DOM, manakala mouseenter ialah peristiwa tidak menggelegak yang hanya berlaku pada elemen yang disasarkan.

Ini bermakna peristiwa alih tetikus boleh dicetuskan apabila kursor tetikus memasuki mana-mana elemen dalam bekas, manakala acara tetikus hanya berlaku apabila kursor memasuki elemen sasaran itu sendiri.

Demo Interaktif

Untuk menggambarkan konsep ini, rujuk demonstrasi jQuery berikut:

var i = 0;<br>$("div.overout ")<br> .mouseover(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">i += 1;
$(this).find("span").text("mouse over x " + i);

Salin selepas log masuk

})
.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);

})
.mouseenter(function() {

$(this).find("span").text("mouse leave");

});

div.out {<br> lebar: 40%; <br> tinggi: 120px;<br> jidar: 0 15px;<br> warna latar belakang: #d6edfc;<br> apungan: kiri;<br>}</p>
<p>div.in {<br> lebar : 60%;<br> ketinggian: 60%;<br> warna latar belakang: #fc0;<br> jidar: auto 10px;<br>}</p>
<p>p {<br> ketinggian garis: 1em ;<br> jidar: 0;<br> pelapik: 0;<br>}

<skrip src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></p>
<p><div class="out overout "><br> <span>gerakkan tetikus anda</span><br> <div class="in"><br> </div><br></div></p>
<p><div class="out enterleave"><br> <span>gerakkan tetikus anda</span><br> <div class="in"><br> </div><br></div>

Dalam demo ini, acara alih tetikus dilampirkan pada elemen "overout" dan acara tetikus masuk dilampirkan pada elemen "enterleave". Semasa anda menggerakkan tetikus anda ke atas bekas "terlebih", bilangan peristiwa alih tetikus bertambah walaupun apabila bergerak ke atas elemen "masuk" dalam. Sebaliknya, bekas "enterleave" hanya menambah kiraan acara tetikus apabila tetikus memasuki bekas itu sendiri.

Bila Menggunakan Setiap Acara

Berdasarkan acara tersendiri mereka tingkah laku penyebaran, adalah disyorkan untuk menggunakan acara alih tetikus apabila anda perlu mengendalikan hoover pada mana-mana elemen dalam bekas, tidak kira sama ada kursor tetikus memasuki bekas itu sendiri. Sebaliknya, gunakan acara mouseenter apabila anda secara khusus ingin mengendalikan hoovering hanya pada elemen sasaran yang ditetapkan.

Atas ialah kandungan terperinci ## Mouseover lwn Mouseenter: Bilakah Anda Harus Menggunakan Setiap Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!