JavaScript에는 NN4, IE4 및 W3C/Safari의 세 가지 이벤트 모델이 있기 때문에 이로 인해 다양한 브라우저에서 이벤트를 처리하는 데 차이가 발생합니다. 다음은 IE4 및 Firefox에서 이벤트를 작동시키는 방법을 설명하기 위한 일부 조각난 코드의 조합입니다. 정상 작동.
먼저 다음 코드를 보세요.
function doEventThing(eventTag ){
var event = eventTag||window.event;
var currentKey = event.charCode||event.keyCode
var eventSource =window.event.srcElement||eventTag; .target;
}
이 코드는 주로 키보드 이벤트를 처리하는 데 사용됩니다. IE에서는 이벤트를 창 개체의 속성으로 직접 사용할 수 있지만 Firefox에서는 W3C 모델이 사용됩니다. Parameter 메소드에 의해 전달된 이벤트는 이벤트를 전파하는 데 사용됩니다. 즉, 위 함수에서
eventTag가 이 역할을 합니다.
var event = eventTag||window.event;
이 코드는 다양한 브라우저에 따라 올바른 이벤트를 가져오고 프로그램에서 사용할 수 있습니다. IE4에서 이 코드를 사용하면 eventTag가 null이 됩니다. 해당 이벤트 = window.event이지만 Firefox에서 실행 중인 경우 eventTag가 수동으로 제공되므로 var event = eventTag입니다. 이 코드 조각을 분석한 결과 doEventThing 메소드를 다음과 같이 수정할 수 있음을 어렵지 않게 알 수 있습니다(자바스크립트에서는 함수 정의 시 매개변수 개수를 명시적으로 표시할 수 없기 때문입니다).
function doEventThing(){
var event = 인수[0] ||window.event;
//다른 코드
}
Firefox에서는 인수[0]가 특정 상황에서 이벤트를 전파하기 위한 매개변수로 사용됩니다(함수 매개변수의 수가 명시적으로 지정하지 않음)... .........
var currentKey = event.charCode||event.keyCode;의 경우에도 KeyCode가 IE4에서 기록되는 브라우저가 다르기 때문에 발생합니다. charCode는 Firefox에 기록되므로 차이점을 처리해야 합니다.
또 다른 차이점은 이벤트 소스를 획득한다는 것입니다.
var eventSource = window.event.srcElement||eventTag.target
문을 통해 IE와 W3C의 차이점도 확인했습니다.
위의 패키징 후에는 기본적으로 IE4 및 Firefox에서 이벤트 메커니즘을 원활하게 사용할 수 있습니다. 물론 다양성을 위해 이 차이점을 캡슐화하여 자체 이벤트 객체를 형성하고 다른 이벤트와 함께 사용할 수 있습니다. 프로그램 개체는 여기에 소개되지 않습니다. 이므로 doEventThing을 버튼 객체에 바인딩하고 이 버튼을 클릭하면 이벤트가 트리거됩니다.
2. 이벤트를 개체에 바인딩: 이는 특히 IE4에서 일반적인 것입니다.
document.getElementById("divid").onclick = doEventThing
3.
4. IE5/Windows의 attachmentEvent() 메서드를 사용합니다.
5. W3C DOM의 addEventListener()를 사용합니다. ) 메소드
addEventListener("eventType",listenerReference,captureFlag);
세 번째 매개변수는 노드가 DOM의 소위 캡처 모드에서 이벤트를 수신하는지 여부를 나타내는 부울 값입니다. 일반적인 이벤트 리스너의 경우 세 번째 매개변수는 false여야 합니다.
프로토타입은 IE 및 W3C와 호환되도록 이벤트를 바인딩할 때 다음을 수행합니다.
코드 복사
코드 _observeAndCache: function(element, name, observer, useCapture) { if (!this.observers) this.observers = []
if (element. addEventListener ) {//W3C DOM
this.observers.push([element, name,observer,useCapture])
element.addEventListener(name,observer,useCapture)
} else if (element. attachmentEvent ) {//IE5/Windows
this.observers.push([element, name,observer,useCapture])
element.attachEvent('on' name,observer)
}
}
this.observers.pust([element,name,observer,useCapture])를 제외하면 4와 5에서 언급된 이벤트 바인딩에 대해 매우 명확합니다. 우리는 이 프로토타입 메소드의 useCapture가 IE에서는 아무런 영향을 미치지 않으며 W3C 이벤트 처리 메커니즘에서만 작동한다는 것을 알고 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
