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  相互学习，相互进步！