jquery 바인딩 원리 단순 분석 및 구현 코드 공유_jquery

jq에는 관련 데이터를 DOM 요소에 바인딩하는 데이터 메서드가 있습니다. jq 메소드를 사용하여 이벤트가 dom에 바인딩되면 해당 시간 목록이 생성됩니다
아래 예를 볼 수 있습니다. (firefox의 객체는 toSource()를 지원하므로 Firefox에서 확인하세요)

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

>

;/head>

;/body>



데이터를 요소에 바인딩하는 데 사용됩니다
데이터 소스는 캐시 개체입니다
요소가 데이터에 바인딩되면 jq 실행의 타임스탬프에 대해 jQueryxxx xxx 속성이 추가됩니다

여기서 누적되는 uuid가 있다고 설명해야 합니다
jQueryxxx의 값은 이 uuid입니다
캐시의 키입니다. 이게 uuid인가요
값은 저장될 데이터입니다
이벤트 바인딩에는 데이터가 매우 중요합니다........................




코드 복사

코드는 다음과 같습니다. function now(){ 새 날짜 반환 ;

};

var win = this,
expando = "jQuery"(),
uuid = 0,
cache = {}; elem, 이름, 데이터){
var id = elem[expando];
if(!id)
id = elem[expando] =
if(name&&!cache[id])
캐시[id] = {};
if(data !== undefine)
cache[id][name] = data;
반환 이름
? ]
: id;
}
win.removeData = function(elem, name){
var id = elem[expando]
if (이름){
if (캐시 [id]) {
delete 캐시[id][name];
name = "";
for ( 캐시의 이름[ id ] )
break

removeData(elem);
}
}else{
try {
delete elem[expando];
} catch(e){
if( elem.removeAttribute )
elem.removeAttribute(expando);
}
delete 캐시[id];
}
}
win.each = function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( 길이 === 정의되지 않음 ) {
for ( 객체의 이름 )
if ( callback.apply ( object[ name ], args ) === false )
break;
} else
for ( ; i < length; )
if ( callback.apply( object[ i ], args ) === false )
break;
} else {
if ( 길이 === 정의되지 않음 ) {
for ( 객체의 이름 )
if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value , i, value ) !== false; value = object[ i] ){}
}
return object
}


그런 다음
jq를 추가합니다. 이는 jQuery.event에 있습니다. 추가 메소드
는 추가 메소드
에서 일부 기능을 구현합니다. 요소의 이벤트를 가져와 이 두 데이터에 바인딩된 데이터를 처리합니다.

이벤트는 이벤트 목록을 저장합니다.
형식
{
click: [{handler:function(){},type:"click",guid:'xx'}.....],
mouse:[... ...]
}
Handle은 실행되는 함수입니다
(모든 실행 함수는 동일합니다. 이벤트 목록을 순회하여 해당 이벤트를 실행합니다.)
그럼 여러 이벤트가 실행될 수 있으므로 유형을 순회합니다. bound
콜백 함수에도 여러 속성이 있습니다
콜백 함수가 handler
handler.guid = gevent.guid
handler.type = name
name이라고 가정하면 특별한 이름으로 간주되어야 합니다. 쉽게 삭제하려면
예:
$('#xx')
.bind('click',function(){})
.bind('click.d',handler)
name is d
Delete 위의 click 이벤트를 삭제하지 않고 d 이벤트만 삭제할 수 있습니다.
마지막으로 해당 요소에 이벤트를 바인딩하지만 실행되는 함수는 모두
function(){
gevent입니다. .handle.apply(arguments.callee .elem, 인수);
});




코드 복사

다음:

win.gevent = {
guid : 1,
add : 함수(요소, 유형, 핸들러){
if ( elem.nodeType == 3 || elem.nodeType == 8)
return;
if ( elem.setInterval && elem != window )
elem = window
//나중에 이벤트 삭제를 용이하게 하기 위해 함수에 고유 인덱스를 제공합니다.
if ( !handler.guid )
handler.guid = this.guid ;
//
요소의 이벤트 핸들 아래에 있는 데이터 가져오기 var events = data(elem, "events") data(elem , "events", {}),
handle =data(elem, "handle") || data(elem, "handle", function(){
//gevent.handle은 다양한 동작이 트리거되는 경우입니다. 실행될 함수
gevent.handle.apply(arguments.callee.elem,args);
})
handle.elem = elem;//이벤트 이름을 탐색합니다.
each(types.split(/s /), function(index, type) {
varnamespaces = type.split(".");
//이벤트 이름 가져오기<에 마우스를 올리면 클릭할 수 있습니다. 🎜>type = 네임스페이스 .shift();//점 뒤의 것을 제거하는 것은 특수한 이름입니다. 삭제 시 click.d
와 같이 지정하여 삭제할 수 있습니다.//이벤트 유형을 사용합니다. 이 특별한 이름을 기록하려면
handler .type = 네임스페이스.slice().sort().join(".")
//이벤트 객체에 이벤트가 이미 있는지 여부를 가져옵니다.
var handlers = events[type];
//이벤트가 존재하지 않으면 이벤트를 요소에 바인딩합니다.
if (!handlers) {
handlers = events[type] = {}>if ( elem.addEventListener)
elem.addEventListener(유형, 핸들, false)
else if (elem.attachEvent)
elem.attachEvent("on" 유형, 핸들)
}
//목록에 있는 요소에 함수를 배치합니다.
handlers[handler.guid] = handler;
})
elem = null;

gevent.hander가 바인딩되었습니다. 이벤트의 실제 실행을 결정하는
함수는 gevent.hander에도 특별히 이름이 지정되어 있지만 용도는 모르겠습니다. 🎜>핸들러에서 이벤트가 먼저 패키징됩니다.
패키징하려면 gevent.fix 및 setEvent를 참조하세요.
주로 네이티브 이벤트의 복사본을 만든 다음 호환되지 않는 메서드를 호환 가능한 쓰기로 합성합니다.
그런 다음 이벤트를 가져옵니다.
요소의 (이벤트 목록) 그런 다음 이벤트 목록을 순회하여 해당 유형이 이벤트 목록의 키인지 확인합니다. 그렇다면 이벤트를 실행합니다.

반환 값은 목록 함수를 실행할 때 판단됩니다.
false가 반환되면 이벤트 버블링과 기본 동작도 정리할 수 있습니다




코드 복사


코드는 다음과 같습니다

win.gevent = {
handle : function(event){
var all, handlers
//Packaging event
event = 인수[0] = gevent.fix( event || window.event );

event.currentTarget = this;

//여기...
var 네임스페이스 = event.type.split( "."); 🎜>event.type = 네임스페이스.shift();
all = !namespaces.length;
var 네임스페이스 = RegExp("(^|\.)" 네임스페이스.slice().sort().join( ".*\.") "(\.|$)");
//이 요소의 이 동작에 대한 이벤트 목록 가져오기
handlers = (data(this, "events" ) || {} )[event.type];
//이 이벤트 목록을 탐색하여 실행을 실행합니다
for ( var j in handlers ) {
var handler = handlers[j]
if ( all | | 네임스페이스.테스트(handler.type) ) {
// 핸들러 함수 자체에 대한 참조를 전달합니다
// 나중에 제거할 수 있도록
// jq에서 주석은 다음과 같이 작성됩니다. . 이벤트 핸들러는 편의상 이 이벤트를 참조하며 나중에 제거할 수 있습니다.
// 하지만 이벤트 핸들러는 제거에 사용되지 않습니다. 그리고 이벤트가 여러 개인 경우에는 이 이벤트가 사용됩니다. 이벤트는
event.handler = handler;//이벤트를 실행하며 요소로 호출되는 이벤트입니다. 이벤트에서 이를 사용하여 < 함수의 반환 값으로 요소를 실행할 수 있습니다. 🎜>var ret = handler.apply(this, 인수);
//반환 값이 있고 반환 값이 false인 경우 실행 시 이벤트 버블링이 방지되고 이벤트 실행이 방지됩니다. 🎜>if( ret !== 정의되지 않음 ){
event.result = ret;
if ( ret === false ) {
event.preventDefault()
event.stopPropagation();
}
}
}
}
},
props: "altKey attrChange attrName 버블 버튼 취소 가능 charCode clientX clientY ctrlKey currentTarget 데이터 세부정보 eventPhase fromElement 핸들러 keyCode MetaKey newValue OriginalTarget pageX pageY prevValue 관련노드 관련Target screenX screenY ShiftKey srcElement target toElement view WheelDelta which".split(" "),
fix : function(event){
//new setEvent는 이벤트에 확장 속성을 제공합니다. 속성이 있는 경우 , 이는 이벤트가 생성되었음을 의미합니다.
if (event[expando] )
return event
//원래 이벤트 유지
// new 새 이벤트는 원래 이벤트와 다릅니다.
var originalEvent = event;
event = new setEvent (originalEvent)
//원래 이벤트의 속성 값을 얻으려면 this.props를 참조하세요.
for ( var i = this.props.length, prop; i; ){
prop = this.props[ --i ]
event[ prop ] = originalEvent[ prop ]; }
//대상 요소를 event.target으로 통합
if ( !event.target )
event.target = event.srcElement || document // srcElement가 정의되지 않을 수 있는 #1925 수정;
//텍스트 노드인 것으로 확인되면 해당 상위 노드를 가져옵니다.
if ( event.target.nodeType == 3)
event.target = event.target.parentNode
if; ( !event.관련Target && event.fromElement )
event.관련Target = event.fromElement == event.target ? event.toElement : event .fromElement
return event; >win.setEvent = function(src){
// 'new' 키워드 없이 인스턴스화 허용
// 이벤트 객체
if( src && src.type ){
this.originalEvent = src ;
this.type = src.type;
// 이벤트 유형
}else
this.type = src;// Firefox의 일부 이벤트에는 버그가 있습니다.(#3843)
// 따라서 기본 값을 사용하지 않습니다.
this.timeStamp = now();
// 고정됨으로 표시
this[expando] = true
} 🎜>function returnFalse(){
return false;
}
function returnTrue(){
return true
}
setEvent.prototype = {
preventDefault: function( ) {
var e = this.originalEvent;
if( !e )
return;
// PreventDefault가 존재하는 경우 원래 이벤트에서 실행
if (e.preventDefault)
e.preventDefault();
// 그렇지 않으면 원래 이벤트의 returnValue 속성을 false로 설정합니다(IE)
e.returnValue = false;
stopPropagation: function() {
var e = this.originalEvent;
if( !e )
return;
// stopPropagation이 존재하는 경우 원래 이벤트에서 실행
if (e.stopPropagation)
e. stopPropagation();
// 그렇지 않으면 원래 이벤트의 cancelBubble 속성을 true로 설정합니다(IE)
e.cancelBubble = true ;
},
stopImmediatePropagation:function(){
this .isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isImmediatePropagationStopped: returnFalse
}; >

코드 복사


코드는 다음과 같습니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：한 번에 여러 Ajax 요청을 처리하는 Jquery 코드_jquery다음 기사：한 번에 여러 Ajax 요청을 처리하는 Jquery 코드_jquery

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술