jquery中的mouseenter實現理解

說在前面：首先說一下二者之間的區別，假設當前元素爲element，mouseover事件具備冒泡特性，也就是說不管鼠標是從別的元素移動到element或者是從element的子元素移動到element都會觸發mouseover事件。對於mouseenter事件，該事件沒有冒泡特性，也就是說只有鼠標穿過該事件的時候纔會觸發mouseenter，若是鼠標一直在element內部「遊走」，則不會觸發mouseenter。具體的例子能夠參考這個例子點擊打開連接。

前提說完了，那麼怎麼使用mouseover實現mouseenter呢！

咱們先來看看jQuery是怎麼實現的，下面是jQuery中實現mouseenter以及mouseleave的代碼：

 

jQuery.each({
	mouseenter: "mouseover",
	mouseleave: "mouseout"
}, function( orig, fix ) {
	jQuery.event.special[ orig ] = {
		delegateType: fix,
		bindType: fix,

		handle: function( event ) {
			var ret,
				target = this,
				related = event.relatedTarget,
				handleObj = event.handleObj;

			// For mousenter/leave call the handler if related is outside the target.
			// NB: No relatedTarget if the mouse left/entered the browser window
			if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
				event.type = handleObj.origType;
				ret = handleObj.handler.apply( this, arguments );
				event.type = fix;
			}
			return ret;
		}
	};
});

　　

其餘的倒不用看，關鍵在於if判斷語句以及其中的組合條件，咱們能夠看到若是related是空或者undefined，則表示鼠標已經移動到window上面了，那麼這時確定已經穿過了該元素。爲何這麼確定，咱們須要知道的是，底層這個判斷語句是在mouseover事件中處理的，related返回的就是鼠標是從哪個元素移動到element的，若是是window，那麼確定是「穿過」了element.

 

        那麼看第二個條件，related!==target && !jQuery.contains(target,related)。咱們能夠看到target=this;那麼target指向的就是element，而related指向的則是由哪個元素移動到element的，咱們知道mouseover和mouseenter的區別在於，在從子元素中移動到element的時候是否觸發相應的事件。這個狀況就能夠用related!==target && jQuery.contains(target,related)給過濾掉。

        經過上一段的解釋，咱們知道這個條件的做用是，若是是從別的元素移動到element的時候，判斷是不是從element的子元素移動過來的，若是是的話，則不觸發事件，若是不是的話(!jQuery.contains(target,related))，則說明是從element的「外部」移動過來的，那麼就表示鼠標已經穿過了element，就須要觸發事件。

        固然了這是jQuery下的實現，若是想用原生的js代碼實現，能夠結合relatedTarget實現。固然在IE中也許咱們會用到fromElement以及toElement相結合的方式來實現。

        這是本身學習過程當中的記錄了，個人理解可能有誤，但願你們在評論中可以提出不足之處。

By Ygh1224  相互學習，相互進步！