マウスオーバーとmouseenter、mouseoutとmouseleaveの違い

Difference Between Mouseover

紹介

考えてみれば、来るでしょう。たとえば、カルーセルを実行する場合、マウスがフロントボタンとリアボタンに移動したときにタイマーをクリアします。私のdomの構造はこんな感じです。

そこで、関数をコンテナーにバインドしました。上に移動するとタイマー機能をクリアし、移動するとタイマー機能を上げます。ドットコンテナにも同じ関数をバインドしました。私の顔の結果を説明させてください。

buttuonによってマウスがカルーセル画像に引き込まれていない場合の通常の停止と移動
マウスがボタンに移動し、タイマーがクリアされず、ストロークが無効になります。
ドットアイコンの上にマウスを置き、タイマーをクリアし、ドットを描画しますが、まだコナティナーではありません。タイマーを増やします。。。うーん
その時、私はカルーセルの姿をばかげた帽子のように見ました。いくつかの動き。。。

原理

実際、本質は、私の関数が正しくバインドされていないことですが、基本的な属性の熟練していない習得でもあります。

Mouseoverイベント：mouseoverイベントは、マウスポインターが選択された要素を通過するか、その子要素を通過するかに関係なく発生します。

Mouseenterイベント：mouseenterイベントは、マウスポインタが選択した要素を通過したときにのみ発生します。

Mouseoutイベント：mouseoutイベントは、マウスポインターが選択された要素または子要素のどちらを離れたかに関係なく発生します。

Mouseleaveイベント：mouseleaveイベントは、マウスポインタが選択した要素を離れたときにのみ発生します。

デモになる

 <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>Documenttitle> <style> .big { width: 500px height: 500px background: red } .small { width: 100px height: 100px background: blue } style> head> <body>  <div class='big'> <div class='small'> div> div> <br> <br> <br> <br> <br> <br> <br> <br> <br>  <div class='big'> <div class='small'> div> div> <script> // mouseover mouseout  var big = document.getElementsByClassName('big')[0], big2 = document.getElementsByClassName('big')[1] big.addEventListener('mouseover', function() { console.log(1) }) big.addEventListener('mouseout', function() { console.log(2) }) // mouseenter mouseleave big2.addEventListener('mouseenter', function() { console.log(3) }) big2.addEventListener('mouseleave', function() { console.log(4) }) script> body> html>