## Mouseover と Mouseenter: 各イベントをいつ使用する必要がありますか?

Mouseover イベントと Mouseenter イベントの違いを理解する

Web 開発では、mouseover イベントと Mouseenter イベントはホバー関連の機能によく使用されます。これらは同様に動作するように見えますが、この 2 つは微妙な違いがあります。

イベントの伝播

mouseover イベントと Mouseenter イベントの主な違いは、イベントの伝播にあります。 。 Mouseover は DOM 階層を上に伝播するバブリング イベントですが、mouseenter は対象の要素でのみ発生する非バブリング イベントです。

これは、マウス カーソルが内部の要素に入ると、mouseover イベントがトリガーされる可能性があることを意味します。一方、mouseenter イベントは、カーソルがターゲット要素自体に入ったときにのみ発生します。

対話型デモ

この概念を説明するには、次の jQuery デモを参照してください。

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

ログイン後にコピー

})
.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> 高さ: 120px;<br> マージン: 0 15px;<br> 背景色: #d6edfc;<br> float: left;</p>}<p><br>div.in {<br> width : 60%;<br> 高さ: 60%;<br> 背景色: #fc0;<br> マージン: 10px auto;</p>}<p><br>p {<br> 行の高さ: 1em ;<br> マージン: 0;<br> パディング: 0;<br>}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><br><div class="アウトオーバーアウト"><br> <span>マウスを移動します</span><br> <div class="in"><br> </div></p></div><p><br><div class="out enterleave"><br> <span>マウスを移動</span><br> <div class="in"><br> </div><br></div>

このデモでは、mouseover イベントが「overout」要素にアタッチされ、mouseenter イベントが「enterleave」要素にアタッチされます。マウスを「overout」コンテナ上に移動すると、内部の「in」要素上に移動した場合でも、mouseover イベントの数が増加します。対照的に、「enterleave」コンテナでは、マウスがコンテナ自体に入ったときにのみ、mouseenter イベントのカウントが増加します。

各イベントをいつ使用するか

それぞれの個別のイベントに基づく伝播動作に影響を与えるため、マウス カーソルがコンテナ自体に入るかどうかに関係なく、コンテナ内の要素に対するマウスオーバーを処理する必要がある場合は、mouseover イベントを使用することをお勧めします。一方、指定されたターゲット要素上でのみフーバリングを特に処理したい場合は、mouseenter イベントを使用します。

以上が## Mouseover と Mouseenter: 各イベントをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。