이벤트 트리거는 문자 그대로 잘 이해 될 수 있으며 이벤트를 트리거하는 데 사용되지만 사용하지 않은 일부 친구는 혼란 스러울 수 있습니다. 이벤트는 일반적으로 페이지에서 사용자의 실제 작업에 의해 유발됩니까? 일부 이벤트는 사용자 정의 이벤트와 같은 프로그램에 의해 구현되어야하며 JQuery의 AJAX 프레임 워크의 일부 사용자 정의 이벤트는 이벤트 트리거에 의해 구현되어야하기 때문에이보기는 완전히 정확하지 않습니다. 물론 일부 특별한 경우, 이벤트 트리거를 사용하여 사용자의 실제 작업에 의해 이벤트를 트리거하는 것보다 이벤트를 트리거하는 것이 더 편리합니다.
브라우저에는 이벤트 트리거 구현을 지원하는 기본 방법이 있지만 호환성에는 큰 차이가 있습니다. 이 호환성 문제는 완전히 예상됩니다. IE는 자체 방법이 있으며 기타 표준 브라우저에는 일련의 방법이 있습니다. 웹 개발자에게는 누구의 방법이 좋든 나쁘든지는 말할 것도없이 개발자가 몇 가지 방법을 개발하는 것이 고문입니다. IE는 이벤트 트리거링을 구현하기위한 Fireevent 메소드를 지원하고, 표준 브라우저는 DispatchEvent를 지원하여 이벤트 트리거링을 구현하며, 둘 다 IE9를 지원합니다. 다음은 Procipotype.js의 소스 코드입니다 (실제로는 SITIO Zhengmei의 블로그에서 복사했습니다) :
코드 사본은 다음과 같습니다.
var fireevent = function (요소, 이벤트) {
if (document.createeventObject) {
// 즉, 브라우저는 Fireevent 메소드를 지원합니다
var evt = document.createeventObject ();
return emeld.fireevent ( 'on'+event, evt)
}
또 다른{
// 다른 표준 브라우저는 DispatchEvent 메소드를 사용합니다
var evt = document.createevent ( 'htmlevents');
// Initevent는 3 개의 매개 변수를 받아들입니다.
// 이벤트 유형, 버블 링 여부, 브라우저의 기본 동작을 차단하든
evt.initevent (이벤트, true, true);
return! element.dispatchevent (EVT);
}
};
위의 방법은 이벤트 트리거의 기능을 구현하기 위해 주류 브라우저와 호환됩니다. 그러나 jQuery의 이벤트 모듈과 같은 일부 캡슐화 된 이벤트 처리 시스템의 경우 간단하지 않으며 시뮬레이션을 통해서만 구현할 수 있습니다. 이전에 매우 간단한 이벤트 처리 시스템을 작성했으며 최근에 사용자 정의 이벤트의 필요성을 발견 했으므로 이전 이벤트 시스템을 기반으로 이벤트 트리거를 시뮬레이션했으며 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
/**
* 이벤트 트리거
* @param {object} dom 요소
* @param {String / Object} 이벤트 유형 / 이벤트 개체
* @param {array} 추가 매개 변수가 이벤트 핸들러 기능으로 전달됩니다.
* @param {boolean}은 버블 링입니다
*/
트리거 : 함수 (Elem, 이벤트, 데이터, isstoppropagation) {
var type = event.type || 이벤트,
// 버블 상위 요소, 문서화, 창
부모 = elem.parentNode ||
Elem.ownerDocument ||
Elem === Elem.ownerDocument && WIN,
EventHandler = $ .Data (Elem, Type + 'Handler');
isstoppropagation = typeof data === '부울'?
데이터 : (isstoppropagation || 거짓);
data = data && isarray (data)? 데이터 : [];
// 사용자 정의 이벤트 객체를 만듭니다
event = typeof event === '객체'?
이벤트 : {
유형 : 유형,
예방 파편 : Noop,
stoppropagation : function () {
isstoppropagation = true;
}
};
이벤트 .target = elem;
data.unshift (이벤트);
if (eventhandler) {
EventHandler.call (Elem, Data);
}
// 거품을 시뮬레이션하기 위해 재귀 적으로 스스로 호출합니다
if (parent &&! isstoppropagation) {
data.shift ();
this.trigger (부모, 이벤트, 데이터);
}
}
시뮬레이션의 원리는 어렵지 않습니다. 이벤트 처리 기능을 특정 요소에 바인딩하십시오. 이벤트를 트리거하는 실제 작업이 있으면 해당 이벤트 처리 기능이 실행됩니다. 따라서 이벤트 트리거의 기능을 달성하려면 해당 이벤트 처리 기능을 얻고 실행하십시오. 이것은 가장 기본입니다.
실제 이벤트가 발생하면 브라우저는 이벤트 객체를 생성하며, 여기에는 이벤트가 발생할 때 일부 속성과 정보가 포함되어 있습니다. 실제 이벤트가 없으면 이벤트 객체가 없으므로 위 코드는 가장 기본적인 기능을 만족시키기 위해 이벤트 객체를 만듭니다.
거품이있는 사건도 있습니다. 실제 사건이 발생하지 않으면 자연스럽게 거품 행동이 없습니다. 그런 다음 버블 함수를 시뮬레이션하려면 부모 요소를 지속적으로 찾아서 문서와 창까지 동일한 유형의 이벤트가 바인딩되는지 확인해야합니다. 구조가 복잡한 경우,이 재귀 호출 방법의 성능은 그리 좋지 않은 것으로 추정됩니다.
마지막으로 브라우저의 기본 동작이 있습니다. 나는 이것을 시뮬레이션하는 것이 매우 번거 롭다고 생각합니다. 그래서 나는 그것을 구현하는 방법을 모른다. 예를 들어, A 태그의 기본 점프입니다. jQuery의 방아쇠를 테스트했지만 구현되지는 않았지만 API 매뉴얼에 다른 동작이 소개되는 것 같습니다. 결국,이 기능은 그다지 중요하지 않으며 아직 심도있는 연구를 많이하지 않았습니다.