Javascript Event_javascript 기술의 IE와 표준 DOM 비교

1. 이벤트 스트림의 차이점

IE는 버블링 이벤트를 사용합니다. Netscape는 캡처 이벤트를 사용합니다. DOM은 캡처를 먼저 사용한 다음 버블링 이벤트를 사용합니다.
예:

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

여기

버블 이벤트 모델: 버튼->div->body )

캡처 이벤트 모델: body->div->button(Netscape 이벤트 흐름)

DOM 이벤트 모델: body->div->button-> ;button-> ;div->body (먼저 캡처한 다음 버블)


2. 이벤트 수신 기능의 차이점

IE 사용: [ Object].attachEvent ("name_of_event_handler", fnHandler); //바인딩 함수
[Object].detachEvent("name_of_event_handler", fnHandler); //바인딩 제거

DOM 사용법:
[Object].addEventListener( "name_of_event", fnHandler, bCapture); //바인딩 함수
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //바인딩 제거

bCapture 매개변수는 스테이지를 설정하는 데 사용됩니다. 이벤트 바인딩에서 true는 캡처 단계이고 false는 버블링 단계입니다.

샘플 코드:

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

function addEventHandler( object, eventType, fnHandler){

if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false)
}else if(object.attachEvent){ / /IE
object.attachEvent("on" eventType, fnHandler)
}else{ //others
object["on" eventType]=fnHandler; function RemoveEventHandler( object, eventType, fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false)
}else if(object.detachEvent){ / /IE
object.detachEvent("on" eventType, fnHandler)
}else{ //others
object["on" eventType]=null; addEventHandler(oDiv ,"click",function(){alert("clicked")})




3. 이벤트 객체 위치 지정(획득)


IE: 이벤트 객체는 윈도우 객체의 속성 이벤트입니다. 이벤트 처리 기능이 실행된 후에는 이벤트에 접근할 수 있습니다.

예:


코드 복사


코드는 다음과 같습니다.

문서 .onclick= function(){ alert(window.event.type); } DOM: 이벤트 객체는 유일한 매개변수로 이벤트 핸들러에 전달되어야 하며 첫 번째 매개변수가 됩니다.

예:

코드 복사


코드는 다음과 같습니다.

문서 .onclick= function(){ alert(arguments[0].type); }

타겟(target) 가져오기

IE :var oTarget=oEvent.srcElement;
DOM: var oTarget=oEvent.target;

5. 차단 이벤트 기본 동작
IE: oEvent.returnValue= false;
DOM: oEvent.preventDefault();

예:


코드 복사


코드는 다음과 같습니다.

//웹페이지 우클릭 메뉴 차단document.body.oncontextmenu=function(oEvent){ if(document.all ){ oEvent=window.event; oEvent.returnValue=false; }else{

oEvent.preventDefault()

}



6. 이벤트 복사 중지(버블)

IE: oEvent.cancelBubble=true;
DOM: oEvent.stopPropagation()

🎜>

코드 복사

코드는 다음과 같습니다.


button.onclick=function(oEvent ){
if(document.all){

oEvent=window.event; oEvent.cancelBubble=true; }else{ oEvent.stopPropagation() 🎜>}
첨부된 코드 테스트 창입니다: (가끔 이 방법이 Alert()보다 낫다고 생각합니다)

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css" media="screen"> div{ margin:0px auto;} #txt1{ font-size:14px; padding:2px 5px;} p{margin:0px auto; width:400px;} </style> <title></title>