◆ mouseenter は内側のイベントを受け取らない(親要素に伝播させない)のでデリゲートできない
◆ addEventListener の第三引数を true にするか mouseover と mouseout で頑張る
◆ jQuery なら何もなかったかのように他と同じ使い方で使える 

mouseenter の特徴

mouseenter というのは要素の内側に入ったというイベントで mouseover みたいに さらに内側の要素に入ってもイベントが起きないやつです

mouseover を使って 内側に入ったら色を変えるようなコードを書いていると mouseover をつけた要素の内側に要素があったときにおかしな動きをします
これは経験ある人多いかと思います

なので 「内側に入ったら」 なら mouseenter の方を使うと思います
ですが この mouseenter の特徴が デリゲート と相性が悪いです

外側の要素にリスナを付けて 内側のイベントから伝わってくるのを受け取るわけですが mouseenter だと内側の要素に mouseenter が発生しても親に伝わらないです
つまり他のイベントのように親要素にリスナをつけて eve.target を見ていても子要素のイベントは受け取れません
var a = document.querySelector("#a")

// click
a.addEventListener("click", function(eve){
console.log(eve.target.id + "がクリックされました")
}, false)

// mouse enter
a.addEventListener("click", function(eve){
console.log(eve.target.id + "の内側に入りました")
}, false)
<div id="a" class="a">
<p id="b1" class="b"></div>
<p id="b2" class="b"></div>
<p id="b3" class="b"></div>
</div>
この例だと click イベントは内側のものでも反応しますが mouseenter イベントは a のものしか表示されません

jQuery だと

直接イベントを扱っていると mouseenter はデリゲートできませんでした
ですが jQuery だと
$("#a").on("mouseenter", ".b", function(){console.log(this.id + "の内側に入りました")})
と書くと 他と同じように b クラスの mouseenter イベントを受け取れています
さすがは jQuery というところです

少し前に jQuery で mouseenter の delegate を使うことがあったのですが マウスを外側に出してもイベントが起きてなくて マウスを内側に入れた時のデザインのままになった要素が複数存在することになってました
jQuery のバグだろうとおもってたのですが さっき確認したら jQuery バージョンは一緒なのにその現象は全く起きなくなってました
原因は jQuery じゃなくてブラウザが mouseover mouseout のイベントを正しく起こせていなかったことみたいです

jQuery なしでやる

ところで jQuery 使わずにやりたいなら mouseenter mouseleave じゃなくて mouseover mouseout 使ってやることになります
mouseover mouseout だと 要素Aの内側に要素Bがあるデザインで 要素Bに入るとき要素Bに mouseoverが起きるだけじゃなくて 要素Aから mouseout するので制御がちょっと複雑になります


裏ワザ

実は addEventListener の第三引数を true にすれば mouseenter のままで delegate を使うことが可能です
ですが 昔の IE に addEventListener true にする動きはできないので IE 対応しないといけないときは mouseover で頑張る必要があります
IE 対応が必要になるのなら jQuery 使えばいいと思いますけど


サンプル

サンプル作ってみました
黄色の大きなのが id="a" で 内側のピンクの四角が id="b1" から id="b8" です
mouseover mouseenter などのイベントがいつ起きるかわかります
いっぱい出て見づらいのでチェックボックスで表示するものを選ぶこともできるようにしました

黄色の枠から飛び出てる下側の部分だとわかりやすいですが inline-block だと内側の要素のマージンにカーソルが乗ったところでmouseover してます
上の隙間がわかりやすいですが block だと黄色の要素のマージンに乗っても mouseover は起きてません


(((追記)))
親要素からはみ出ている子要素が inline-block の場合にマウスが要素の上じゃなくて 要素のマージンの上に乗った時ところで mouseenter したことになるのは Chrome だけで Firefox では 要素の上に来て初めてイベントが起きました

こういう細かいところで違いがありすぎですよね