好久沒有更新文章了哀蘑，年底事情比較多（別找借口了，其實(shí)就是懶...）葵第，跟大伙說(shuō)聲抱歉哈~（不用道歉绘迁，也沒什么人看的）。馬上就要大年三十了卒密，大家都陸陸續(xù)續(xù)肥家過(guò)年了缀台，然鵝，我還在公司苦逼地留守陣地哮奇，真是嗶了狗了……
言歸正傳膛腐，還是繼續(xù)咱們的學(xué)術(shù)研究吧~
在原生JS中鼠標(biāo)移入移出事件有四個(gè)，分別為mouseover ,mouseout ,mouseenter,mouseleave鼎俘，其中mouseover和mouseenter為移入事件哲身，mouseout和mouseleave為移出事件，那么問(wèn)題來(lái)了贸伐，這每組事件之間究竟有什么區(qū)別呢勘天？
可能很多人現(xiàn)在都還不知道它們之間的區(qū)別，甚至以為它們其實(shí)功能是一樣一樣的，真是too young too simple脯丝！
一商膊、mouseover和mouseenter
mouseover: 只要鼠標(biāo)指針移入事件所綁定的元素或其子元素，都會(huì)觸發(fā)該事件
mouseenter: 只有鼠標(biāo)指針移入事件所綁定的元素時(shí)宠进，才會(huì)觸發(fā)該事件
換句話說(shuō)就是晕拆，如果一個(gè)元素沒有子元素，那么該元素綁定mouseover或者mouseenter兩種事件效果沒有區(qū)別材蹬，鼠標(biāo)每次移入元素時(shí)都只會(huì)觸發(fā)一次事件实幕；如果綁定了mouseover事件的元素存在子元素，那么赚导，每次移入該元素時(shí)都會(huì)觸發(fā)一次事件（包括從外部移入和從子元素移入）茬缩，移入子元素時(shí)也會(huì)觸發(fā)一次事件。
舉個(gè)簡(jiǎn)單例子~
<div class="box over" onmouseover="over()">
<span>over</span>
</div>
<div class="box enter" onmouseenter="enter()">
<span>enter</span>
</div>
// mouseover事件
function over() {
console.log('觸發(fā)了mouseover事件吼旧！');
}
// mouseenter事件
function enter() {
console.log('觸發(fā)了mouseenter事件凰锡！');
}
測(cè)試效果如下圖所示：
二、mouseout和mouseleave
這兩者對(duì)比原理與mouseover和mouseenter是一致的圈暗，如果上面理解了掂为，那么這個(gè)也就理解了。
mouseout: 只要鼠標(biāo)指針移出事件所綁定的元素或其子元素员串，都會(huì)觸發(fā)該事件
mouseleave: 只有鼠標(biāo)指針移出事件所綁定的元素時(shí)勇哗，才會(huì)觸發(fā)該事件
換句話說(shuō)就是，如果一個(gè)元素沒有子元素寸齐，那么該元素綁定mouseout或者mouseleave兩種事件效果沒有區(qū)別欲诺，鼠標(biāo)每次移出元素時(shí)都只會(huì)觸發(fā)一次事件；如果綁定了mouseout事件的元素存在子元素渺鹦，那么扰法，每次移出該元素時(shí)都會(huì)觸發(fā)一次事件（包括移出至外部和移出至子元素），從子元素移出時(shí)也會(huì)觸發(fā)一次事件毅厚。
舉個(gè)簡(jiǎn)單例子~
<div class="box out" onmouseout="out()">
<span>out</span>
</div>
<div class="box leave" onmouseleave="leave()">
<span>leave</span>
</div>
// mouseout事件
function out() {
console.log('觸發(fā)了mouseout事件塞颁！');
}
// mouseleave事件
function leave() {
console.log('觸發(fā)了mouseleave事件！');
}
測(cè)試效果如下圖所示：
通過(guò)以上圖文詳解吸耿，相信你已經(jīng)能清楚這些事件之間的區(qū)別了吧祠锣！如果你看完還是有疑問(wèn)的話，請(qǐng)戳→此處←親身體驗(yàn)吧~
重點(diǎn)總結(jié)
① 只要鼠標(biāo)指針移入（或移出）事件所綁定的元素或其子元素咽安，都會(huì)觸發(fā)
mouseover（或mouseout）事件
② 只有鼠標(biāo)指針移入（或移出）事件所綁定的元素時(shí)伴网，才會(huì)觸發(fā)mouseenter（或mouseleave）事件
最后，祝大家新春愉快板乙！
