## Mouseover vs. Mouseenter: Wann sollten Sie die einzelnen Ereignisse nutzen?

Die Unterschiede zwischen Mouseover- und Mouseenter-Ereignissen verstehen

In der Webentwicklung werden die Mouseover- und Mouseenter-Ereignisse häufig für Hover-bezogene Funktionen verwendet. Obwohl sie sich scheinbar ähnlich verhalten, gibt es subtile Unterschiede zwischen den beiden.

Ereignisweitergabe

Der Hauptunterschied zwischen den Ereignissen „Mouseover“ und „MouseEnter“ liegt in ihrer Ereignisweitergabe . Mouseover ist ein Bubbling-Ereignis, das sich in der DOM-Hierarchie nach oben ausbreitet, während MouseEnter ein nicht-Bubbling-Ereignis ist, das nur auf dem Zielelement auftritt.

Das bedeutet, dass Mouseover-Ereignisse ausgelöst werden können, wenn der Mauszeiger auf ein beliebiges Element darin eintritt ein Container, während MouseEnter-Ereignisse nur auftreten, wenn der Cursor das Zielelement selbst betritt.

Interaktive Demo

Um dieses Konzept zu veranschaulichen, sehen Sie sich die folgende jQuery-Demonstration an:

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

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

})
.mouseleave(function() {

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

});

div.out {<br> width: 40%; <br> Höhe: 120px;<br> Rand: 0 15px;<br> Hintergrundfarbe: #d6edfc;<br> Float: links;<br>}</p>
<p>div.in {<br> Breite : 60 %;<br> Höhe: 60 %;<br> Hintergrundfarbe: #fc0;<br> Rand: 10px automatisch;<br>}</p>
<p>p {<br> Zeilenhöhe: 1em ;<br> margin: 0;<br> padding: 0;<br>}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></p>
<p><div class="out overout "><br> <span>bewegen Sie Ihre Maus</span><br> <div class="in"><br> </div><br></div></p>
<p><div class="out enterleave"><br> <span>bewegen Sie Ihre Maus</span><br> <div class="in"><br> </div><br></div>

In dieser Demo ist das Mouseover-Ereignis an das „overout“-Element und das Mouseenter-Ereignis an das „enterleave“-Element angehängt. Wenn Sie Ihre Maus über den „Overout“-Container bewegen, erhöht sich die Anzahl der Mouseover-Ereignisse, selbst wenn Sie über das innere „In“-Element fahren. Im Gegensatz dazu erhöht der „Enterleave“-Container die Anzahl der MouseEnter-Ereignisse nur dann, wenn die Maus den Container selbst betritt.

Wann jedes Ereignis verwendet werden soll

Basierend auf dem jeweiligen Ereignis Ausbreitungsverhalten wird empfohlen, das Mouseover-Ereignis zu verwenden, wenn Sie das Hoovering auf einem beliebigen Element innerhalb eines Containers durchführen müssen, unabhängig davon, ob der Mauszeiger in den Container selbst eintritt. Verwenden Sie andererseits das Ereignis „mouseenter“, wenn Sie das Staubsaugen gezielt nur auf einem bestimmten Zielelement durchführen möchten.

Das obige ist der detaillierte Inhalt von## Mouseover vs. Mouseenter: Wann sollten Sie die einzelnen Ereignisse nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css ajax html Float count for while auto class Event var JS console number function dom this margin padding background https

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn