자바스크립트 이벤트 트리거 소개_자바스크립트 기술 구현

이벤트 트리거는 문자 그대로 잘 이해될 수 있으며 이벤트를 트리거하는 데 사용되지만 이벤트는 일반적으로 페이지에서 사용자의 실제 작업에 의해 트리거되지 않습니다. 사용자 정의 이벤트와 같은 일부 이벤트는 프로그램에 의해 구현되어야 하기 때문에 이 보기는 완전히 정확하지 않습니다. jQuery의 ajax 프레임워크의 일부 사용자 정의 이벤트는 이벤트 트리거에 의해 구현되어야 합니다. 물론, 일부 특수한 경우에는 실제 사용자 작업을 통해 이벤트를 트리거하는 것보다 이벤트 트리거를 사용하여 이벤트를 트리거하는 것이 더 편리합니다.

브라우저에는 이벤트 트리거를 지원하는 기본 메서드가 있지만 호환성에는 큰 차이가 있습니다. IE에는 자체 메서드가 있고 다른 표준 브라우저에도 어떤 메서드가 좋은지 관계없이 여러 가지 메서드가 있습니다. 또는 나쁜 점은 WEB 개발자에게 여러 가지 방법을 고안하는 것은 개발자에게 일종의 고문입니다. IE는 이벤트 트리거링을 구현하기 위해 fireEvent 메소드를 지원하고, 표준 브라우저는 이벤트 트리거링을 구현하기 위해 dispatchEvent를 지원합니다. 이중 IE9는 두 가지를 모두 지원합니다. 다음은 프로토타입.js의 소스 코드입니다. (실제로 Situ Zhengmei 블로그에서 복사했습니다.)

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

var fireEvent = function(element,event) {
if (document.createEventObject){
// IE 브라우저는 fireEvent 메소드를 지원합니다
var evt = document.createEventObject();
return element.fireEvent('on' event,evt)
}
else{
// 다른 표준 브라우저는 dispatchEvent 메소드를 사용합니다.
var evt = document.createEvent( 'HTMLEvents' )
// initEvent는 3개의 매개변수를 허용합니다:
// 이벤트 유형, 버블링 여부, 브라우저의 기본 동작 방지 여부
evt.initEvent(event, true, true)
return !element.dispatchEvent(evt);
}
};

위 방법은 주류 브라우저와 호환되어 이벤트 트리거 기능을 구현합니다. 그러나 jQuery의 이벤트 모듈과 같은 일부 캡슐화된 이벤트 처리 시스템의 경우 그렇게 간단하지 않으며 시뮬레이션을 통해서만 구현할 수 있습니다. 이전에 아주 간단한 이벤트 처리 시스템을 작성한 적이 있는데, 최근에는 커스텀 이벤트가 필요하게 되어 이전 이벤트 시스템을 기반으로 이벤트 트리거를 시뮬레이션했습니다.

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

/**
* 이벤트 트리거
* @param { Object } DOM 요소
* @param { String / Object } 이벤트 유형/이벤트 객체
* @param { Array } 이벤트 처리 함수에 전달되는 추가 정보 매개변수
* @param { Boolean } 버블링 여부
*/
trigger: function( elem, event, data , isStopPropagation ){
var type = event.type || event,
// 문서, 창까지 버블링된 부모 요소
parent = elem.parentNode || |
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, type 'Handler' );

isStopPropagation = 데이터 유형 === 'boolean' ? > data : (isStopPropagation || false);

data = data && isArray( data ) ? data : [];

// 사용자 정의 이벤트 객체 생성
event = 이벤트 유형 === 'object' ?
이벤트 : {
유형 : 유형,
PreventDefault : noop,
stopPropagation : function(){
isStopPropagation = true;
}
};

event.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// 버블링을 시뮬레이션하기 위해 자신을 재귀적으로 호출
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}

시뮬레이션의 원리는 어렵지 않습니다. 이벤트를 발생시키는 실제 작업이 있으면 해당 이벤트 처리 기능을 요소에 바인딩합니다. 이벤트 트리거를 얻으려면 가장 기본적인 해당 이벤트 처리 기능을 실행하기만 하면 됩니다.

실제 이벤트가 발생하면 브라우저는 이벤트 발생 시 일부 속성과 정보를 포함하는 이벤트 객체를 생성합니다. 실제 이벤트가 발생하지 않으면 이벤트 객체도 존재하지 않으므로, 위의 코드에서도 가장 기본적인 기능을 충족시키기 위해 이벤트 객체를 생성합니다.

이벤트 버블링도 있습니다. 실제 이벤트가 발생하지 않으면 당연히 버블링 동작이 발생하지 않습니다. 따라서 버블링 기능을 시뮬레이션하려면 상위 요소를 지속적으로 검색하여 동일한 유형이 바인딩되어 있는지 확인해야 합니다. 문서와 창에 도달할 때까지 이벤트를 발생시킵니다. 구조가 복잡할 경우 이 재귀 호출 방식의 성능은 좋지 않을 것으로 예상됩니다.

마지막은 브라우저의 기본 동작을 시뮬레이션하는 것이 상당히 번거롭다고 생각합니다. 예를 들어 a 태그의 기본 점프는 어떻게 해야 할지 모르겠습니다. jQuery의 트리거를 테스트했지만 구현하지 않았지만 다른 동작은 API 매뉴얼에 소개된 것 같습니다. 결국 이 기능은 그다지 중요하지도 않고, 아직 연구도 많이 하지 않았습니다.