집 >웹 프론트엔드 >JS 튜토리얼 >Javascript Event_javascript 기술의 IE와 표준 DOM 비교

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB원래의: 2016-05-16 18:28:561239검색

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()보다 낫다고 생각합니다)

성명：

이전 기사：javascript 이분법(배열 배열)_javascript 기술다음 기사：javascript 이분법(배열 배열)_javascript 기술

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

관련 기사