jQuery 14번 읽기(이벤트를 발생시키는 핵심 방법)

이벤트 모듈의 진화에서는 이벤트를 적극적으로 트리거하기 위해 dispatchEvent(표준) 및 fireEvent(IE)를 사용했습니다. 다음과 같습니다

 
... 
 디스패치 = w3c ? 
function(el, type){ 
try{ 
var evt = document.createEvent('Event') 
evt.initEvent(type,true,true); >el.dispatchEvent( evt); 
}catch(e){alert(e)}; 
} : 
function(el, type){ 
try{ 
el.fireEvent( 'on' 유형) ; 
}catch(e){alert(e)} 
} 
... 

 

jQuery는 다음 위치에서 dispatchEvent/fireEvent 메서드를 사용하지 않습니다. 모두. 다른 메커니즘을 사용합니다.
jQuery 트리거 이벤트의 핵심 메소드는 jQuery.event.trigger입니다. 클라이언트 프로그래머를 위한 두 가지 트리거 이벤트 메서드를 제공합니다. .trigger/.triggerHandler

jQuery 14번 읽기(이벤트를 발생시키는 핵심 방법)_jquery

일부 요소에서 이벤트가 발생하면 두 가지 작업이 발생할 수 있습니다. 하나는 기본 동작이고 다른 하나는 이벤트 핸들러입니다. 예를 들어 링크 A
Sina Mail를 클릭한 후 1 팝업(이벤트 핸들러)이 나타나면 확인을 클릭하여 mail.sina.com.cn으로 이동합니다(기본 동작). 따라서 이벤트를 트리거하도록 설계된 기능은 이 두 가지 상황을 고려해야 합니다.
jQuery는 .trigger와 .triggerHandler를 사용하여 다음 두 상황을 구분합니다.
.trigger는 이벤트 핸들러를 실행합니다/버블링을 실행합니다/기본 동작을 실행합니다
.triggerHandler는 이벤트 핸들러를 실행합니다/버블링하지 않음/하지 않음 기본 동작 실행

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

의 소스 코드입니다. Trigger/.triggerHandler는 다음과 같습니다

trigger : function( type, data ) { 
return this.each(function() { 
jQuery.event.trigger( type, data, this ); 
 }); 
}, 
 TriggerHandler: function( type, data ) { 
if ( this[0] ) { 
 return jQuery.event.trigger( type, data, this[0], true ); 
} 
} , 

 
둘 다 jQuery.event.trigger를 호출하는 것을 볼 수 있습니다. 호출할 때 하나는 true를 전달하지 않았고 다른 하나는 전달했습니다. true TriggerHander를 전달하면 이벤트 핸들러만 실행된다는 의미입니다. 

또한 주목해야 할 한 가지 차이점이 있습니다. .trigger는 jQuery 객체 컬렉션에서 작동하는 반면 .triggerHandler는 jQuery 객체의 첫 번째 요소에서만 작동합니다. 다음과 같습니다

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

p1< /p>

코드 복사

코드는 다음과 같습니다. trigger: function( event, data, elem, onlyHandlers ) { // Event 객체 또는 이벤트 유형

var type = event.type || event,

namespaces = [], 
exclusive 
...... 
} 

 
jQuery.event.trigger의 정의이며 대부분 생략되어 있습니다. 아래 목록은 

코드 복사

코드는 다음과 같습니다. if ( type.indexOf ("! ") >= 0 ) { // 독점 이벤트는 정확한 이벤트에 대해서만 트리거됩니다(네임스페이스 없음)

type = type.slice(0, -1)

exclusive = true; 
 } 

 
이 단락은 .trigger('click!'), 즉 네임스페이스가 아닌 이벤트를 트리거하는 상황을 처리하기 위한 것입니다. Exclusive 변수는 이벤트 객체에 매달린 후 jQuery.event.handle 내에서 사용됩니다. 예를 들어 

코드 복사

코드는 다음과 같습니다. function fn1() { console .log(1)

}

function fn2() {
console.log(2)
}
$(document).bind('click.a', fn1) ;
$(document).bind('click', fn2)
$(document).trigger('click!') // 2

두 개의 클릭 이벤트를 문서에 추가했습니다. 하나는 네임스페이스 "click.a"가 있고 다른 하나는 "click"이 없습니다. 트리거를 사용하는 경우 클릭 매개변수 뒤에 느낌표 "!"를 추가합니다. 2의 출력 결과를 보면 네임스페이스의 이벤트가 트리거되지 않는 것을 알 수 있습니다. 요약하자면:
.trigger('click')은 모든 클릭 이벤트를 트리거합니다.
.trigger('click.a')는 "click.a"의 클릭 이벤트만 트리거합니다.
.trigger('click!' ) 네임스페이스가 아닌 클릭 이벤트 실행
그런 다음

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

 
if ( type.indexOf(".") >= 0 ) { 
// 네임스페이스 트리거; handler()의 이벤트 유형과 일치하는 정규 표현식을 생성합니다. 
namespaces = type.split(" ."); 
type = 네임스페이스.shift(); 
namespaces.sort(); 
} 

이 단락은 이해하기 쉽습니다. 즉, .trigger( 'click.a') 처리, 즉 네임스페이스가 있는 이벤트 처리입니다.
그럼

코드를 복사하세요 코드는 다음과 같습니다.

 
if ( (!elem || jQuery.event.customEvent[ 유형 ]) && !jQuery.event.global[ 유형 ] ) { 
// 이 이벤트 유형에 대한 jQuery 핸들러가 없으며 인라인 핸들러를 가질 수 없습니다 
 return; 
 } 

"getData"와 같은 일부 특수 이벤트 또는 트리거된 이벤트에 대해 직접 반환합니다.
아래로 이동

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

 
event = typeof event === "object" ? 
// jQuery.Event 객체 
event[ jQuery.expando ] ? event : 
// 객체 리터럴 
new jQuery.Event( 유형, 이벤트 ) : 
// 이벤트 유형만(문자열) 
new jQuery.Event( type ) 

세 가지 상황이 있습니다
이벤트 자체는 jQuery.Event 클래스의 인스턴스입니다
, 이벤트는 일반 js 객체입니다(jQuery.Event 클래스의 인스턴스가 아님)
, 이벤트는 "click"과 같은 문자열입니다.
계속
event.type = type; event.exclusive = 독점;
event .namespace = 네임스페이스.join(".");
event.namespace_re = new RegExp("(^|\.)" 네임스페이스.join("\.(?: .*\.)?") "( \.|$)");
exclusive/namespace/namespace_re는 이벤트에 연결되어 있으며 jQuery.event.handle(이벤트 네임스페이스)에서 사용할 수 있다는 점에 유의해야 합니다.
다음은

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

// TriggerHandler () 및 전역 이벤트는 버블링되지 않거나 기본 작업을 실행하지 않습니다. 
if ( onlyHandlers || !elem ) { 
event.preventDefault() 
event.stopPropagation()} 

 
onlyHandlers는 .triggerHandler에서만 사용됩니다. 즉, 요소의 기본 동작을 트리거하지 않고 버블링을 중지합니다. 

다음은

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

// Handle 전역 트리거

if ( !elem ) { 
// TODO: 데이터 캐시 조롱을 중지하고 전역 이벤트를 제거하고 항상 문서에 연결합니다 
jQuery.each( jQuery.cache, function() { 
// InternalKey 변수는 단지 
// 이 항목을 더 쉽게 찾기 위해 사용되며 현재는 
// jQuery.expando를 가리킵니다. 
var InternalKey = jQuery.expando, 
internalCache = this[ InternalKey ]; 
if ( InternalCache && InternalCache.events && InternalCache.events[ type ] ) { 
jQuery.event.trigger( event, data, InternalCache.handle.elem ); >} 
}); 
return 
} 

 
이것은 재귀 호출입니다. elem 요소가 전달되지 않으면 jQuery.cache에서 가져옵니다. 
다음 항목

코드 복사 코드는 다음과 같습니다. // Don't 텍스트 및 주석 노드에서 이벤트를 수행하지 않음

if ( elem.nodeType === 3 || elem.nodeType === 8 ) {

return 
} 

 
속성 , 텍스트 노드 직접 반환. 
다음은 복사코드입니다

복사코드는 다음과 같습니다 코드는 다음과 같습니다 // 들어오는 데이터를 복제하고 이벤트 앞에 추가하여 핸들러 인수 목록을 만듭니다.

data = data != null ? jQuery.makeArray( data ) : []

data.unshift( event ); 🎜>
먼저 배열에 매개변수 데이터를 넣고 배열의 첫 번째 위치에 이벤트 객체를 넣습니다.
다음 항목

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

 
// 화재 이벤트 현재 요소에서 DOM 트리를 버블링합니다. 
do { 
var handler = jQuery._data( cur, "handle" ) 
event.currentTarget = cur 
if(handle); 
 handler.apply( cur, data ); 
} 
// 인라인 바운드 스크립트 트리거 
if ( ontype && jQuery.acceptData( cur ) && cur[ ontype ] && cur[ ontype ]. apply( cur , data ) === false ) { 
event.result = false 
event.preventDefault(); 
} 
// 문서로 버블링한 다음 창으로 
 cur = cur .parentNode || cur.ownerDocument || cur === event.target.ownerDocument && window; while ( cur && !event.isPropagationStopped() ); 코드는 매우 중요합니다. 
, 핸들 
 가져오기, 

실행, onXXX를 통해 추가된 이벤트(예: onclick="fun()")
실행, 상위 요소 가져오기
를 수행하세요. > while 루프 이 네 단계를 반복하여 이벤트 버블링을 시뮬레이션합니다. 창 개체까지.
다음은

코드 복사

코드는 다음과 같습니다. // If 아무도 기본 동작을 막지 않았습니다. if ( !event.isDefaultPrevented() ) {

var old,

special = jQuery.event.special[ type ] || ( ( (! 특수._기본 || 특수._default.call( elem.ownerDocument, 이벤트 ) === false) && 
!(type === "click" && jQuery.nodeName( elem, "a" )) && jQuery.acceptData( elem ) ) { 
// 이벤트와 이름이 같은 대상에서 기본 DOM 메서드를 호출합니다. 
// IE6이므로 여기에서 .isFunction)()을 확인할 수 없습니다. /7은 해당 테스트에 실패합니다. 
// IE<9는 숨겨진 요소(#1486)에 포커스를 두고 죽습니다. try/catch를 다시 방문하고 싶을 수도 있습니다. 
try { 
if( ontype && elem[ type ] ) { 
// FOO() 메서드를 호출할 때 onFOO 이벤트를 다시 트리거하지 마세요. 
old = elem[ ontype ] 
if ( old ) { 
elem[ ontype ] = null; 
} 
jQuery.event.triggered = type; 
elem[ type ]() 
} 
} catch( ieError ) {} 
if( old ); 🎜>elem [ ontype ] = old; 
} 
jQuery.event.triggered = undefine; 
} 
} 

 
이 섹션은 브라우저의 기본값에 대한 트리거입니다. 행동. form.submit(), 버튼.클릭() 등이 있습니다. 
Firefox 링크의 보안 제한으로 인해 링크에 대한 jQuery의 기본 동작은 트리거되지 않도록 통합되었습니다. 즉, .trigger()를 통해 링크를 점프할 수 없습니다. 