예를 들어 이벤트를 트리거하는 요소 참조는 IE 브라우저의 경우 event.srcElement이고 FF 브라우저의 경우 event.target입니다. 또한 FF 브라우저의 페이지에 대한 커서 위치는 event.pageX이며 처리됩니다. IE 브라우저의 방법은 다릅니다. 물론 "이벤트 버블링 방지" 및 "브라우저 기본 동작 취소"와 같은 몇 가지 방법도 있습니다. JavaScript가 이벤트에서 작동하도록 하려면 브라우저마다 다른 처리 방법이 있습니다. 코드는 브라우저에서 정상적으로 처리될 수 있으므로 별도로 판단하고 처리해야 합니다. 이제 jQuery는 통합된 호환성 처리 함수 $.event.fix(e)를 제공합니다. 이 함수는 문서에서 공식적으로 사용법을 설명하지 않습니다. 프레임워크 코드를 읽을 때 이런 방식으로 사용할 수 있다는 것을 알았습니다. 1. 사용 방법 jQuery의 이벤트 호환 처리는 주로 다음과 같은 간단한 단계로 구분됩니다. 1. 웹 페이지의 헤드 영역에서 jQuery 프레임워크 라이브러리 파일을 참조합니다. 2. 이벤트 처리 방법을 정의하고, 호출 위치에서 이벤트 매개변수를 균일하게 전달합니다. 3. 먼저 이벤트 방법 내에서 $.event.fix를 사용하여 이전 이벤트를 새 이벤트 참조로 변환합니다. . 이벤트 객체 메서드 및 속성을 처리한 후 이벤트 메서드 뒤에 사용합니다. 2. 사용예
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns=" http://www.w3.org/1999/xhtml">
jQuery의 $.event.fix 함수를 사용하여 브라우저 이벤트 처리 통합 < ;/html> 3. jQuery $.event.fix 메소드 정의 원본 코드 참조
코드 복사
코드는 다음과 같습니다.
수정: 함수(이벤트) { if (event[expando] == true) return event; // 원본 이벤트 객체의 복사본을 저장합니다. // 읽기 전용 속성을 설정하기 위해 "복제"합니다. var originalEvent = event; 이벤트 = { originalEvent: originalEvent }; var props = "altKey attrChange attrName 거품 버튼 취소 가능 charCode clientX clientY ctrlKey currentTarget 데이터 세부정보 eventPhase fromElement 핸들러 keyCode MetaKey newValue OriginalTarget pageX pageY prevValue 관련Node 관련Target screenX screenY ShiftKey srcElement 대상 timeStamp toElement 유형 보기 휠Delta which".split(" ") ; for (var i = props.length; i; i--) event[props[i]] = originalEvent[props[i]]; // 수정됨으로 표시 event[expando] = true; // 이후 PreventDefault 및 stopPropagation을 추가합니다. // 복제에서는 작동하지 않습니다. event.preventDefault = function() { // PreventDefault가 있는 경우 원래 이벤트에서 실행합니다. if (originalEvent.preventDefault) originalEvent.preventDefault(); // 그렇지 않으면 원래 이벤트의 returnValue 속성을 false로 설정합니다(IE) originalEvent.returnValue = false; }; event.stopPropagation = function() { // stopPropagation이 존재하는 경우 원래 이벤트에서 실행합니다. if (originalEvent.stopPropagation) originalEvent.stopPropagation(); // 그렇지 않으면 원래 이벤트의 cancelBubble 속성을 true로 설정합니다(IE) originalEvent.cancelBubble = true; }; // timeStamp 수정 event.timeStamp = event.timeStamp || 지금(); // 필요한 경우 대상 속성 수정 if (!event.target) event.target = event.srcElement || 문서; // srcElement가 정의되지 않을 수 있는 #1925 수정 // 대상이 텍스트 노드(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, body = 문서.본문; event.pageX = event.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc.clientLeft || 0); event.pageY = event.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc.clientTop || 0); } // 주요 이벤트에 대해 추가 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) event.which = event.charCode || 이벤트.키코드; // Mac이 아닌 브라우저에 MetaKey 추가(PC의 경우 ctrl, Mac의 경우 Meta 사용) if (!event.metaKey && event.ctrlKey) event.metaKey = event.ctrlKey; // 클릭할 항목을 추가합니다: 1 == left; 2 == 중간; 3 == 오른쪽 // 참고: 버튼은 정규화되지 않았으므로 사용하지 마세요 if (!event.which && event.button) event.which = (event.button & 1 ? 1 : (이벤트.버튼 & 2 ? 3 : (이벤트.버튼 & 4 ? 2 : 0))); 복귀 이벤트; }
작성자:WebFlash 출처:http://webflash.cnblogs.com