JSのmouseenter、mouseleave、mouseover、mouseoutの違い

JavaScript はフロントエンド開発の中核です。最近、JS の知識をまとめて皆さんと共有しました。この記事では主に JavaScript におけるマウス関連の知識、つまり mouseenter、mouseleave、mouseover、mouseout の違いについて紹介します。これまで混乱していてよく勉強していませんでしたが、ようやく理解できました。今、それを皆さんと共有していますので、必要であればご覧ください。

上記のコード:

<style>
　　　　div { margin: 0 auto; }
　　　　.box { box-sizing: border-box; padding: 30px 0; width: 300px; border: 1px solid #005AA0; }
　　　　.sonBox { width: 150px; height: 150px; background-color: #00823C; }
　　</style>
　　<div class="box">
　　　　<div class="sonbox"></div>
　　</div>
　　<script type="text/javascript">
　　　　var box = document.getElementsByClassName("box")[0];
　　　　box.addEventListener("mouseenter",function(){
　　　　　　console.log("MouseEnter!");
　　　　});
　　　　box.addEventListener("mouseover",function(){
　　　　　　console.log("MouseOver!");
　　　　});
　　　　box.addEventListener("mouseout",function(){
　　　　　　console.log("MouseOut!");
　　　　　});
　　　　box.addEventListener("mouseleave",function(){
　　　　　　console.log("MouseLeave!");
　　　　});
　　</script>

上と同様に、sub-div.sonbox を含む box という名前の div クラスを作成し、マウスがボックス全体を通過したときに何が表示されるかをテストします。

上記のことから、マウスが 1 のとき、つまりマウスがボックスに入ると、mouseover と mouseenter が発生し、enter 前に over がトリガーされることが簡単にわかります。 ; マウスが 2 のとき、つまりマウスが入ったとき Sonbox を使用すると、マウスアウトとマウスオーバーがトリガーされるのは、親要素ボックスを出て子要素に入った後にトリガーされるため、理解しやすいです。 、しかしここですぐにオーバーが発生します。なぜですか？次の 3 つは、子要素のボックスを離れるとマウスアウトがトリガーされ、再び親要素のボックスに入るとマウスオーバーがトリガーされることがわかります。から 4 まで、ボックスから離れると、mouseout と Mouseleave がトリガーされます。

概要:

1. マウスオーバーとマウスアウトは、マウスが要素を通過するときにトリガーされます。子要素の数によって異なります。
2. Mouseenter と Mouseleave は、マウスが要素を通過するときにのみ、親要素でトリガーされます。
3. マウスオーバーとマウスアウトはマウスエンターとマウスリーブの前にトリガーされます。
したがって、一般的にマウスオーバーとマウスアウトは一緒に使用され、マウスエンターとマウスリーブは一緒に使用されます。使用シナリオ。

以上がJSのmouseenter、mouseleave、mouseover、mouseoutの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。