[jQuery]mouseoutとmouseoverとmouseenterとmouseleave

jQueryを本格的に使うようになってから気になっていたのですが、mouseoutとmouseoverとmouseenterとmouseleaveの違いってなんなのだろうか？

「DOM Leve3 イベント mouseover/mouseout, mouseenter/mouseleave それぞれの違いについて」を読んでも、なかなか理解できなかったので(エントリーが悪いというわけでは決してありません。)実際に下のようにコードを組んでみました。

<div id="container" style="border:solid 1px red;height:100px;width:100px;padding:10px;">
 <span id="main" style="border:solid 1px blue;width:80px;">Test<br>Test<br>Test</span>
</div>
<script>
jQuery(function($){

 $('#container').mouseout(function(e){
  e.preventDefault();
  console.log('mouseout')
 });

 $('#container').mouseover(function(e){
  e.preventDefault();
  console.log('mouseover')
 });


 $('#container').mouseenter(function(e){
  e.preventDefault();
  console.log('mouseenter')
 });

 $('#container').mouseleave(function(e){
  e.preventDefault();
  console.log('mouseleave')
 });
});

</script>

で、実行してみた結果、spanタグにカーソルが入った場合、mouseoutとmouseoverの順で反応し、spanタグからカーソルがはずれた場合もmouseoutとmouseoverの順で反応しました。

一方で、divタグにカーソルが入った場合、mouseoverとmouseenterの順で反応し、divタグからカーソルが外れた場合、mouseoutとmouseleaveの順で反応しました。

ただ純粋にdivタグにカーソルが入ったorはずれたを探知したい場合は、「mouseenter」と「mouseleave」を使えばよさそうです。