네이티브 자바스크립트 호환성 테스트 example_javascript 기술

1. 스타일 시트에서 너비 및 테두리 색상과 같은 CSS를 가져옵니다(줄 사이 아님). 주로 IE6-7은 currentStyle을 지원하고 표준 브라우저는 getCompulatedStyle을 지원합니다.

예: 캡슐화된 함수

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

function getStyle(obj,name){
if(obj. currentStyle){
return obj.currentStyle[이름]
}
else{
return getCompulatedStyle(obj,false)[name]; >
호출: getStyle('color');

2. 스크롤 거리 가져오기

document.body.scrollTop은 표준 브라우저에 적합합니다.
document.documentElement.scrollTop은 버전에 적합합니다. IE9 이하
호환성은 다음과 같이 작성할 수 있습니다
var top = document.body.scrollTop | document.documentElement.scrollTop;

표준 브라우저: 이벤트 객체 이벤트 함수
IE 하위 버전에서는 이벤트 객체(전역)를 직접 사용해야 합니다




코드 복사

코드는 다음과 같습니다. 다음: 함수(ev) { var event = ev || event }

이제 이벤트가 이벤트 개체로 사용됩니다. >
4. 이벤트 IE 바인딩 이벤트를 attachmentEvent/detachEvent(바인딩 또는 취소)로 정의하고, 표준 브라우저 addEventListener/removeEventListener(바인딩 또는 취소)
이벤트 바인딩 또는 취소에 대한 매개변수는 다음과 같습니다. , 함수는 익명 함수일 수 없습니다. 그렇지 않으면
addEventListener:

target.addEventListener(type, listening, useCapture);를 사용하는 것을 잊지 마세요. : 문서 노드, 문서, 창 또는 XMLHttpRequest.
유형: 문자열, 이벤트 이름, "on" 제외(예: "click", "mouseover", "keydown" 등)
리스너: EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다.
useCapture: 캡처 사용 여부, 일반적으로 false입니다. 예: document.getElementById("testText").addEventListener("keydown", function (event) { Alert(event.keyCode); }, false)

IE:

target .attachEvent(type, Listener);
대상: 문서 노드, 문서, 창 또는 XMLHttpRequest.
유형: "onclick", "onmouseover", "onkeydown" 등과 같은 "on"을 포함한 문자열, 이벤트 이름
리스너: EventListener 인터페이스 또는 JavaScript의 함수를 구현합니다. 예: document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);})

이벤트 바인딩의 캡슐화 기능:




코드 복사


코드는 다음과 같습니다.

function addEvent(obj,ev,fn){ if (obj.attachEvent){ obj.attachEvent('on' ev,fn) } else{ obj.addEventListener(ev, fn, false)

}
}


바운드 이벤트 fn 함수에 사용되는 경우 obj가 아니라 창(IE의 하위 버전에만 이 버그가 있음)이라는 점에 주의해야 합니다.




코드 복사

코드는 다음과 같습니다.

addEvent(document,'click',function(ev) { var ev =ev||window.event; var target = ev.target||ev.srcElement; // 이벤트 소스 가져오기는 주로 IE 낮은 버전에서 발생하는 버그입니다. window alert(target) }) ;

바인딩 취소 이벤트 fn은 함수 이름입니다




코드 복사

코드는 다음과 같습니다.

function RemoveEvent(obj,ev,fn){ if(obj.detachEvent){ obj.detachEvent ('on' ev,fn) } else{ obj.removeEventListener(ev, fn, false)

}
}


5.ajax
Ajax는 XMLHttp 객체 표준 버전 브라우저를 생성하며 IE 하위 버전은 XMLHttp 객체를 생성하기 위한
표준 버전과 호환되지 않습니다.

코드 복사


코드는 다음과 같습니다.

//1. 객체 생성 if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest();//표준 브라우저 } else

{

var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE 하위 버전
}
alert( oAjax)


6. 기본 이벤트 취소
js의 기본 이벤트 취소는 주로 return false와 PreventDefault의 두 가지 유형입니다.
기본 이벤트의 false 반환은 모든 브라우저와 호환되지만 이벤트가 발생하면- 바인딩된 addEventListener는 취소됩니다. 기본 이벤트를 잃지 않고 기본 오른쪽 클릭 이벤트를 취소하는 예:

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

document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function (){
return false;
}

7. call과 apply
call과 apply의 차이점은
예를 들어

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

function show(){
alert(this)
}
//show(); 팝업창
//show .call(); 팝업창
//show.call(this) //팝업창
//show. call(5); //팝업 5;
show.call(this,5) ; //팝업 창

call(this, arg1, arg2,...) this 호출에서 매개변수는 주로 이벤트 객체를 참조하고 그 뒤의 매개변수는 함수에서 사용되는 매개변수임을 알 수 있습니다.
call과 apply를 사용하면 주로 this를 수정하는데 사용됩니다. 기능상 큰 차이는 없습니다
apply(this,arguments)는 매개변수가 확실하지 않을 때 주로 사용됩니다
8. DOM 획득 자막 노드 children 및 childNodes
자식은 첫 번째 레이어를 가져와야 자식 노드를 얻을 수 있으며 레이블 노드여야 합니다
예:

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

< a href="#">텍스트 1
텍스트 2

children[0] 첫 번째 태그인 children[0].children[0]을 가져오려는 경우에만 첫 번째 범위를 가져올 수 있으므로 children의 길이는 2입니다. 상위 버전에서는 빈 텍스트를 계산합니다. Firefox 및 Google에서는 하위 IE 버전(6-8)에서 위의 길이가 4입니다.