jQuery 파트 8 읽기: 이벤트 패키징 Object_jquery

예를 들어 이벤트 버블링을 중지하기 위해 IE는 cancelBubble을 사용하고 표준 브라우저는 stopPropagation을 사용합니다.
이벤트 소스 객체를 얻기 위해 IE는 srcElement를 사용하고 표준 브라우저는 target 등을 사용합니다.
jQuery는 주로 jQuery.Event 클래스와 jQuery.event.fix 메서드를 사용하여 기본 이벤트 개체를 복구하고 래핑합니다.

코드 복사 코드는 다음과 같습니다.

jQuery.Event = function( src ) {
// 'new' 키워드 없이 인스턴스화 허용
if ( !this.preventDefault ) {
return new jQuery.Event( src )
}
// 이벤트 객체
if ( src && src.type ) {
this.originalEvent = src;
this.type = src.type;
// 문서에 버블링되는 이벤트가 방지됨으로 표시되었을 수 있습니다
// 처리기로 트리 아래로 내려가면
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
src.getPreventDefault && src.getPreventDefault()) returnTrue : returnFalse;
// 이벤트 유형
} else {
this.type = src;
}
// Firefox의 일부 이벤트에 대해 timeStamp가 버그가 있습니다(#3843)
/ / 따라서 기본 값에 의존하지 않습니다.
this.timeStamp = jQuery.now();
// 고정으로 표시
this[ jQuery.expando ] = true;
function returnFalse() {
return false;
}
function returnTrue() {
return true;
}// jQuery.Event는 다음과 같이 DOM3 이벤트를 기반으로 합니다. ECMAScript 언어 바인딩
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event에 의해 지정됨 .prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent
if ( !e ) {
return;
// PreventDefault가 존재하는 경우 원래 이벤트에서 실행
if ( e.preventDefault ) {
e.preventDefault()
// 그렇지 않으면 원래 이벤트의 returnValue 속성을 false로 설정합니다( IE)
} else {
e.returnValue = false;
}
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue; this.originalEvent ;
if ( !e ) {
return;
}
// stopPropagation이 존재하는 경우 원래 이벤트에서 실행
if ( e.stopPropagation ) {
e .stopPropagation( );
}
// 그렇지 않으면 원래 이벤트의 cancelBubble 속성을 true로 설정합니다(IE)
e.cancelBubble = true;
stopImmediatePropagation: function()


jQuery.Event 클래스는 주로 다음과 같은 작업을 수행합니다

1, 네이티브 이벤트 객체를 임시로 저장하는 OriginalEvent 속성이 확장됩니다.
2,
timeStamp
가 수정되었습니다. 이 속성은 IE6/7/8에서 지원되지 않으며, 지원되는 다른 브라우저에서는 반환 값이 다릅니다.
3. DOM 요소의 기본 동작을 방지하기 위해 PreventDefault
4가 사용됩니다. 이벤트 버블링을 중지하려면 stopPropagation
5가 구현되거나 확장됩니다. 또는 확장됨: stopImmediatePropagation, isDefaultPrevented , isPropagationStopped, isImmediatePropagationStopped

또한 jQuery.Event의 클래스 작성 방식도 독특합니다.

숨겨진 새 기능을 사용하여 객체를 생성
합니다.

jQuery.event.fix 메소드는 다음과 같습니다

코드 복사


코드는 다음과 같습니다

수정: 함수( 이벤트 ) {
if ( 이벤트[ jQuery.expando ] ) {
반환 이벤트;
}
// 원본 이벤트 객체의 복사본을 저장합니다
// 및 "복제"하여 읽기 전용 속성을 설정합니다.
var originalEvent = event;
이벤트 = jQuery.Event(originEvent);
for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
이벤트[ prop ] = 원본이벤트[ prop ];
}
// 필요한 경우 대상 속성 수정
if ( !event.target ) {
// srcElement가 정의되지 않을 수 있는 #1925 수정
event.target = event. src요소 || 문서;
}
// 대상이 텍스트 노드인지 확인(Safari)
if ( event.target.nodeType === 3 ) {
event.target = event.target.parentNode;
}
// 필요한 경우 관련 타겟 추가
if ( !event.관련Target && event.fromElement ) {
event.관련Target = event.fromElement === event.target ? event.toElement : 이벤트.fromElement;
}
// 누락된 경우 페이지X/Y를 계산하고 클라이언트X/Y를 사용할 수 있음
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement,
본문 = document.body;
event.pageX = event.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
// 주요 이벤트에 대해 which 추가
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
// Mac이 아닌 브라우저에 MetaKey 추가(PC의 경우 ctrl, Mac의 경우 Meta 사용)
if ( !event.metaKey && event.ctrlKey ) {
event.metaKey = event. Ctrl 키;
}
// 클릭에 대한 추가: 1 === left; 2 === 중간; 3 === 오른쪽
// 참고: 버튼은 정규화되지 않았으므로 사용하지 마세요
if ( !event.which && event.button !== undefine ) {
event.which = ( event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}
복귀 이벤트;
},

它主要做了以下工작
1，event = jQuery.Event(originEvent ); 该句创建了一个jQuery.Event类的实例对象，该对象修复及扩充上面刚刚提到了。
2, 一个循环将原生事件对象的所有属性拷贝给 1 中的이벤트对象。

复代码 代码如下:

for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
이벤트[ prop ] = 원본이벤트[ prop ];
}

3, 统一事件源对象为 target 。
4, 统一事件相关对象为relativeTarget 。
5, 扩充了pageX, pageY 俙两属性首次Firefox에서는 X/Y 计算得到를 사용할 수 없습니다.性也是는 Firefox에서 매우 유용합니다.
7, 修复了metaKey.
8, 扩充了 which, 使用它获取鼠标按键值
细心的人可能注意到了,jQuery获取键盘按键值화鼠标按键值city是采用 which。它没有向其它属性一样去兼容W3C已有标准(버튼).给zChain.js添加包装事件对象의상대기업 。

zChain-0.7.1.js