jQuery 소스코드 이벤트 분석 분석_jquery
- WBOY원래의
- 2016-05-16 18:25:271306검색
이벤트의 동작은 addEvent, fireEvent, RemoveEvent 3가지 이벤트 메소드에 지나지 않습니다. 일반적으로 lib는 호환성 메모리 누수와 같은 문제를 해결하기 위해 브라우저에서 제공하는 기능을 일부 확장합니다. 세 번째 질문은 domReady 상태를 얻는 방법입니다.
6.1 이벤트 패키지
브라우저 이벤트 호환성이 골치아픈 부분입니다. IE의 이벤트는 전역 창 아래에 있는 반면 Mozilla의 이벤트는 이벤트 소스 매개변수가 콜백 함수에 전달되는 것입니다. 다른 많은 이벤트 처리 방법도 있습니다.
Jquery는 이벤트 패키지를 제공하는데, 이는 다른 라이브러리에서 제공하는 것보다 조금 더 간단하지만 사용하기에는 충분합니다.
코드 복사 코드는 다음과 같습니다.
//이벤트를 래핑합니다.
수정: function(event) {
if (event[expando] == true) return event;//이벤트가 래핑되었음을 나타냅니다.
//원래 이벤트를 저장하고 하나를 복제합니다.
varoriginEvent = 이벤트; ①
이벤트 = {originEvent :originEvent}
for (var i = this.props.length, prop;i;) {
-i]; event[prop] = originalEvent[prop];
}
event[expando] = true; event.preventDefault = function() { ②
// 원래 이벤트에서 실행
if (originalEvent. PreventDefault)
originEvent.preventDefault();
originEvent.returnValue = false;
}
Event.stopPropagation = function() {
🎜> }; 올바른 timeStamp
event.timeStamp || now();
// 올바른 대상
if (!event.target) ③
event.
if (event.target.nodeType == 3)//텍스트 노드가 상위 노드입니다.
Event.target = event.target.parentNode;
// 관련Target
if (!event.관련Target && event.fromElement) event.관련Target = event.fromElement == event.target
? .toElement : event.fromElement;
// 누락된 경우 페이지X/Y를 계산하고 클라이언트X/Y를 사용할 수 있음
if (event.pageX == null && event.clientX != null) { ⑥
var doc = document.documentElement, body = document.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); event.which = event.charCode || event.keyCode;
// Mac 이외의 브라우저에 메타키 추가
if (!event.metaKey && event.ctrlKey ) 8
event.metaKey = event.ctrlKey;
// 클릭할 항목 추가: 1 == left; 2 == middle; 3 == right
// 버튼은 정규화되지 않았으므로 사용하지 마세요. it
if (!event.which && event.button) 9
event.which = (event.button & 1 ? 1 : (event.button & 2
? 3 : (event .button & 4) ? 2 : 0)));
},
위 코드는 ①에서 원본 이벤트의 참조를 유지하고 원본 이벤트를 복제합니다. 이 복제 이벤트를 마무리하세요. ② 원본 이벤트에 PreventDefault, stopPropagation 메소드를 실행하여 기본 이벤트 액션 발생을 방지할지, 버블링 이벤트가 위쪽으로 전달되는 것을 중지할지 여부를 결정합니다.
③대상이 수정되었습니다. srcElement는 IE에서 동시에 사용되며, 텍스트 노드 이벤트의 경우 대상이 상위 노드로 전달되어야 합니다.
4 관련Target은 마우스아웃 및 마우스오버에만 유용합니다. IE에서는 to와 from이라는 두 개의 Target 변수로 나누어져 있는데, Mozilla에서는 분리되어 있지 않습니다. 호환성을 보장하기 위해 관련 타겟을 사용하여 이를 통합합니다.
⑥은 행사의 좌표 위치입니다. 이는 페이지에 상대적입니다. 페이지를 스크롤할 수 있는 경우 해당 클라이언트에 스크롤을 추가해야 합니다. IE에서는 기본 2px 본문 테두리도 빼야 합니다.
7번 포인트는 키보드 이벤트의 키를 event.which의 속성으로 통일한 것입니다. Ext의 구현은 ev.charCode || ev.keyCode || 0입니다. ⑨는 event.which에서 마우스 이벤트 키를 통합하는 것입니다. charCode, ev.keyCode 중 하나는 문자 키이고, 다른 하나는 문자 키가 아닙니다. 9 호환성 처리를 위한 사용 및 방법. Ext는 다음 세 줄의 호환성 문제를 해결합니다.
var btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isSafari ? {1:0,2:1,3:2} : {0:0 ,1:1,2:2}); this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1)
① ② ③ ④ ⑥ ⑧ ⑩
6.2 이벤트 처리
Jquery는 이벤트 등록, 제거 및 실행을 위한 몇 가지 메서드를 제공합니다.
6.2.1 등록
jquery에서는 이벤트 등록을 위해 바인딩, 원, 토글, 호버 4가지 방법을 제공하며 가장 기본적인 방법입니다. 하나는 한 번만 실행되도록 등록된 메소드이고, 토글은 교대로 실행되도록 등록된 메소드입니다. Hover는 마우스 호버링을 등록하는 방법입니다.
코드 복사 코드는 다음과 같습니다.
bind : function(type, data, fn ) {
return type == "unload" ? this.one(type, data, fn) : this
.each(function() {// fn || data, fn && data는 데이터 매개변수를 인식합니다. 선택사항입니다
jQuery.event.add(this, type, fn || data, fn && data)
}) },
unload 이벤트는 한 번만 실행할 수 있으며 다른 이벤트는 기본 등록 방법을 사용합니다.
// 일치하는 각 요소의 특정 이벤트(예: 클릭)에 일회성 이벤트 핸들러 함수를 바인딩합니다.
//각 개체에서 이 이벤트 핸들러는 한 번만 실행됩니다. 그 외의 규칙은 Bind() 함수와 동일합니다.
// 이 이벤트 핸들러는 기본 동작(브라우저)을 방지하는 데 사용할 수 있는 이벤트 개체를 수신합니다.
// 기본 동작을 취소하고 이벤트 버블링을 방지하려면 이 이벤트 처리 함수가 false를 반환해야 합니다.
코드 복사 코드는 다음과 같습니다.
one : function(type, data, fn ) {
var one = jQuery.event.proxy(fn || data, function(event) {
jQuery(this).unbind(event, one);
return (fn || data). apply(this , 인수);/this->현재 요소
});
return this.each(function() {
jQuery.event.add(this, type, one, fn && 데이터)
})
},
One과 바인딩은 기본적으로 동일합니다. 차이점은 jQuery.event.add를 호출할 때 등록된 이벤트 처리 기능이 약간 조정된다는 점입니다. 들어오는 이벤트 처리 기능을 프록시하기 위해 jQuery.event.proxy라는 이름이 사용되었습니다. 이벤트가 이 에이전트의 함수 호출을 트리거하면 해당 이벤트가 먼저 캐시에서 삭제된 후 등록된 이벤트 함수가 실행됩니다. 다음은 fn에 의해 등록된 이벤트 함수의 참조를 얻는 클로저의 적용입니다.
//호버 이벤트(마우스가 개체 위로 이동하고 개체 밖으로 이동)를 시뮬레이션하는 방법입니다.
//자주 사용하는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
//일치하는 요소 위로 마우스를 이동하면 지정된 첫 번째 기능이 트리거됩니다. 마우스가 이 요소 밖으로 이동하면
/는 지정된 두 번째 기능을 트리거합니다. 또한 마우스가 여전히 특정 요소(예: div의 이미지)에 있는지 여부를 감지합니다.
// 그렇다면 트리거하지 않고 계속 "호버" 상태를 유지합니다. move-out 이벤트(mouseout 이벤트를 사용한 일반적인 오류 수정)
마우스 오버: function(fnOver, fnOut) {
return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut),
Hover는 바인드를 기반으로 합니다.
//클릭할 때마다 순차적으로 함수를 호출합니다.
toggle: function(fn) {
var args = 인수, i = 1;
while (i < args.length)//각 함수에 GUID가 할당됨
jQuery.event.proxy ( fn, args[i ]);//수정된 항목은 여전히 args에 있습니다
return this.click(jQuery.event.proxy(fn, function(event) {//GUID 할당 this.lastToggle = (this. lastToggle || 0) % i; // 이전 함수 event.preventDefault(); // 기본 동작 방지
// 매개변수에서 함수 실행, 배열과 같은 매개변수를 사용할 수 있음
return args[this. lastToggle].apply(this,arguments)||false;
}));
},
Toggle의 매개변수는 여러 개일 수 있습니다. 먼저 코딩하여 UUID를 생성합니다. 그런 다음 click 메소드를 호출하여 에이전트의 콜백을 다시 등록하십시오. 이 함수는 이벤트가 트리거될 때 실행됩니다. 먼저 매개변수의 함수가 마지막으로 실행된 시간을 계산합니다. 그런 다음 기본 작업을 방지합니다. 그런 다음 실행할 다음 기능을 찾으십시오.
//jquery 객체에 일반적으로 사용되는 이벤트 메서드 추가
jQuery.each(
("blur, focus, load, resize, scroll, unload, click, dblclick,"
"mousedown ,mouseup,mousemove,mouseover,mouseout,change,select,"
"submit,keydown,keypress,keyup,error").split(","),
function(i, 이름) {jQuery.fn [name] = function(fn) {
return fn? this.bind(name, fn) : this.trigger(name);
};}); 이벤트 처리 방법에는 위에서 호출한 클릭이 포함됩니다. 여기서는 등록을 위해 여전히 바인딩이 호출되는 것을 볼 수 있습니다. 물론 이벤트는 프로그램을 통해 실행될 수도 있습니다.
위의 방법 중 대부분은 이벤트를 등록하는 것이며, 이는 궁극적으로 등록 기능을 완료하기 위해 jQuery.event.add()에 속합니다. Dom0 또는 DOM1의 이벤트 메서드를 사용하는 경우 elem.onclick=function(){}을 사용하여 요소의 특정 이벤트에 대한 핸들러 함수를 등록합니다. 이것의 가장 큰 단점은 각 이벤트가 단지 처리 기능일 뿐이라는 것입니다. dom1 메소드가 개선되었습니다. elem.addEventListener(type, handler, false)를 사용하여 요소 이벤트에 대한 여러 핸들러 함수를 등록할 수 있습니다.
이 처리 방법은 완벽하지 않습니다. 이 이벤트를 한 번만 실행하면 조금 번거로울 것입니다. 이벤트 수신을 취소하려면 이벤트 처리 함수 끝에서 elem.removeEventListener를 수행해야 합니다. 그렇게 하면 비즈니스 문제가 발생할 수 있습니다. 이벤트 수신을 취소하기 전에 첫 번째 이벤트 처리 함수가 다시 트리거되면 어떻게 되나요?
커스텀 이벤트 등록 및 처리를 지원하지 않고, 여러 이벤트에 대해 동일한 핸들러 기능을 등록할 수 없는 브라우저 방식도 있습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.