Jquery의 mouseenter에 대한 심층적 이해

앞서 얘기해보자: 먼저 현재 요소가 요소라고 가정할 때, mouseover 이벤트는 버블링 특성을 가지고 있습니다. 즉, 마우스가 다른 요소에서 다른 요소로 이동하든지 간에 상관없습니다. 요소의 하위 요소에서 요소로 이동하면 마우스 오버 이벤트가 트리거됩니다. mouseenter 이벤트의 경우 이 이벤트에는 버블링 기능이 없습니다. 즉, 마우스가 이벤트를 통과할 때만 mouseenter가 트리거됩니다. 마우스가 요소 내에서 "방황"하면 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;
		}
	};
});

다른 코드는 볼 필요가 없습니다. 핵심은 ifjudgment 문에 있습니다. 그리고 결합된 조건을 보면 관련이 비어 있거나 정의되지 않은 경우 마우스가 창으로 이동했다는 의미이며 이때 요소를 통과했음에 틀림없다는 것을 알 수 있습니다. 왜 그렇게 확실한가요? 우리가 알아야 할 것은 마우스오버 이벤트에서 기본 판단문이 처리된다는 것입니다. 관련 항목은 마우스가 창으로 이동한 요소를 반환합니다. " 요소. .

그런 다음 두 번째 조건인 관계를 살펴보세요.==target && !jQuery.contains(target,관련). target=this; 요소가 요소로 이동되는 관련 지점을 볼 수 있습니다. mouseover와 mouseenter의 차이점은 하위 요소에서 해당 요소로 이동할 때 트리거되는지 여부입니다. . 이 상황은 관련!==target && jQuery.contains(target, 관련)을 사용하여 필터링할 수 있습니다.

이전 단락의 설명을 통해 이 조건의 기능은 요소가 다른 요소에서 요소로 이동하는 경우 해당 요소의 하위 요소에서 이동되는지 여부를 결정하는 것임을 알고 있습니다. 그렇지 않은 경우 (!jQuery.contains(target,관련))은 요소 "외부"에서 이동했다는 의미입니다. 즉, 마우스가 요소를 통과했으며 이벤트가 트리거되어야 함을 의미합니다.

물론 이는 jQuery에서 구현됩니다. 네이티브 js 코드를 사용하여 구현하려면 관련 타겟과 결합하면 됩니다. 물론 IE에서는 이를 달성하기 위해 fromElement와 toElement의 조합을 사용할 수 있습니다.

제가 직접 학습한 과정을 기록한 글입니다. 부족한 부분은 댓글로 지적해주시길 바랍니다.

위 내용은 Jquery의 mouseenter에 대한 심층적 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!