DOM_DOM의 이벤트 처리 소개

이 인터페이스는 EventListeners 인터페이스를 EventTarget에 바인딩하거나 바인딩 해제하기 위한 'addEventListener' 및 'removeEventListener' 메소드를 제공합니다.

DOM 2 이벤트는 이벤트 컨텍스트 정보를 제공하기 위해 이벤트 인터페이스를 정의하며 여러 표준 속성과 메서드를 제공합니다. Event 인터페이스를 구현하는 객체는 일반적으로 현재 이벤트와 관련된 일부 정보를 제공하기 위해 첫 번째 매개변수로 이벤트 처리 함수에 전달됩니다.

이벤트 등록
DOM 2 Events의 설명에 따르면 노드는 이벤트 리스너를 바인딩 및 바인딩 해제하기 위해 'addEventListener' 및 'removeEventListener' 메소드를 사용하지만 IE6 IE7 IE8은 이 두 가지 메소드를 지원하지 않으며, 'attachEvent' 및 'detachEvent' 메소드를 대안으로 사용하며 Opera는 두 메소드를 모두 지원합니다. Chrome Safari Firefox는 표준 방법만 지원합니다.

브라우저 호환성 문제를 해결하기 위해 기능을 맞춤설정하여 해결할 수 있습니다. 예:

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

var EventUtil = {
addHandler: 함수(요소, 유형, 핸들러) {
if(element.addEventListener) {
element.addEventListener(유형, 핸들러, false)
} else if(element.attachEvent) {
element.attachEvent("on" 유형, 핸들러);
} else {
element["on" 유형] = 핸들러
}
},
removeHandler: 함수(요소, 유형, 핸들러) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false)
} else if (element.detachEvent) {
element.detachEvent("on" " 유형, 핸들러 );
} else {
요소["on" 유형] = null;
}
}
};

'addEventListener' 정보 'attachEvent'와 관련하여 몇 가지 주의할 점이 있습니다.

IE는 캡처 단계에서 이벤트 리스너 트리거를 지원하지 않으며 'attachEvent' 메소드는 이벤트에 응답할지 여부를 나타내는 매개변수를 제공하지 않습니다. 캡처 단계에서 트리거됩니다.
'addEventListener' 및 'attachEvent'는 여러 이벤트 리스너를 등록할 수 있습니다.
Firefox Chrome Safari Opera에서 동일한 이벤트에 대해 동일한 이벤트 리스너를 여러 번 등록하면 중복 등록이 삭제됩니다. IE에 반복적으로 등록된 이벤트 리스너 핸들러는 여러 번 반복적으로 실행됩니다.
동일한 요소에 대해 여러 이벤트 리스너가 등록되면 IE6 IE7에서는 이벤트 리스너의 실행 순서가 무작위이고 IE8은 반대 순서입니다. , Firefox Chrome Safari Opera는 순차적입니다.
요소에 의해 등록된 이벤트 리스너에 불법 이벤트 리스너(비기능)가 ​​있는 경우 IE Firefox에서는 예외가 발생하지만 Chrome Safari Opera에서는 불법 이벤트 리스너가 발생합니다. 이벤트 리스너는 무시되고 다른 이벤트 리스너는 계속 실행됩니다.
이벤트 객체
IE에서는 이벤트 객체가 전역 변수로 저장되어 유지됩니다. 사용자 또는 다른 이벤트에 의해 트리거되는 모든 브라우저 이벤트는 window.event 객체를 업데이트합니다. 따라서 코드에서는 간단히 window.event를 호출하여 이벤트 개체를 쉽게 가져온 다음 event.srcElement를 사용하여 추가 처리를 위해 이벤트를 트리거한 요소를 가져올 수 있습니다.

표준 DOM 처리의 경우 이벤트 객체는 전역 객체가 아닙니다. 일반적으로 현장에서 발생하고 현장에서 사용됩니다. 이벤트 객체는 해당 이벤트 처리 기능에 자동으로 전달됩니다. 코드에서 함수의 첫 번째 매개변수는 이벤트 객체입니다.

호환성 문제를 해결하기 위해 일반적으로 코드에서 다음과 같이 처리합니다.

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

함수 핸들러(e){
e = e || window.event


이벤트 등록을 위해 Button 1 표준 방식.

이유는 onclick="foo()"가 직접 실행되기 때문입니다. foo() 함수에는 foo 함수에 전달되는 매개변수가 없습니다.

이 문제를 해결하는 방법에는 두 가지가 있습니다.

먼저 등록 방법을 button으로 변경하세요. 실제 매개변수이며 이름이 event로 지정되어야 합니다. 이런 방식으로 foo 함수는 이벤트 매개변수를 얻을 수 있습니다.

둘째, 등록된 코드를 수정하지 말고 이벤트 처리 방식으로 처리해 주세요. 중요한 것은 이때 이벤트 객체가 실제로 존재하지만 foo 함수를 호출하는 함수를 찾을 수 있다는 점입니다. 물론 이것은 시스템 함수이므로 중요하지 않습니다. foo.caller 함수를 통해 foo 함수의 현재 호출을 얻을 수 있으며, 이 함수의 첫 번째 매개변수는 이벤트 객체이므로 이와 같이 이벤트 객체를 얻을 수 있습니다. foo.caller.arguments[0].

참고:

attachEvent 메소드를 사용하여 이벤트 리스너를 등록하는 경우에만 IE는 이벤트 리스너가 전달한 첫 번째 매개변수를 이벤트 개체로 사용하도록 지원합니다.
Chrome Safari Opera 이벤트 객체를 얻는 두 가지 방법을 모두 지원합니다.
Firefox는 이벤트 객체를 얻는 표준 방법만 지원합니다.
이벤트 객체의 속성
IE는 이벤트 객체의 표준 속성과 메소드에 대해 제한된 지원을 제공하는 반면, Firefox, Chrome, Safari Opera는 대부분의 속성과 메소드에 대해 비표준 대안을 제공합니다. 완전한 지원 외에도 이벤트 개체의 표준 속성 및 메서드 외에도 IE에서 제공하는 비표준 대안도 다양한 수준으로 지원합니다.

특성을 이용하여 표준에 부합하는 비표준 메소드와 속성을 판단하고 사용

target　　　　srcElement

　preventDefault()　　returnValue

　stopPropagation()　　cancelBubble

관련Target　　　fromElement toElement

예:

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

getEvent: 함수(이벤트) {
return 이벤트 ? 이벤트: window.event;
},
getTarget: 함수(이벤트) {
return event.target || event.srcElement;
},
preventDefault: 함수(이벤트) {
if (event.preventDefault) {
event.preventDefault()
} else {
이벤트 .returnValue = false;
}
},
stopPropagation: 함수(이벤트) {
if(event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true ;
}
}

참고:

SD9011: 이벤트 모델은 브라우저마다 다릅니다