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

이벤트 모듈의 진화에서는 이벤트를 적극적으로 트리거하기 위해 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

일부 요소에서 이벤트가 발생하면 두 가지 작업이 발생할 수 있습니다. 하나는 기본 동작이고 다른 하나는 이벤트 핸들러입니다. 예를 들어 링크 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>

p1

<script> <br>$('p').click(함수() Alert(1)} ); <br>$('p').trigger('click'); // 3번 재생합니다. 즉, 3번의 p 클릭이 발생합니다. ; , 첫 번째 p의 클릭만 트리거합니다. <br></script>


자, 이제 jQuery.event.trigger 코드를 게시할 시간입니다

코드 복사

코드는 다음과 같습니다. 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()를 통해 링크를 점프할 수 없습니다.