브 라 우 저 호 환 (JS 부분)

JS 의 브 라 우 저 호환성 문제 와 처리 방식 을 정리 하 였 습 니 다.
이벤트 추가 / 이벤트 제거 방법
DOM 2 급 인지, IE, DOM 0 급 인지 각각 검사한다.DOM 0 레벨: 이벤트 처리 프로그램 속성 에 함 수 를 부여 합 니 다.간단 하고 브 라 우 저 를 뛰 어 넘 는 장점 이 있 습 니 다.추 가 된 이벤트 처리 프로그램 은 거품 단계 에서 실 행 됩 니 다.이벤트 처리 프로그램 도 그 에 따 른 요소 역할 을 수행 합 니 다.이벤트 처리 프로그램 삭제: 이벤트 처리 프로그램의 속성 값 을 null 로 설정 합 니 다.DOM 2 급: DOM 2 급 이벤트 처리 방법: addEventListener () 와 removeEventListener (). 이 두 가지 방법 은 세 개의 인 자 를 받 아들 이 고 처리 할 이벤트 이름 으로 이벤트 처리 프로그램의 함수 와 불 값 으로 불 값 이 true 일 때 캡 처 단계 에서 이벤트 처리 함 수 를 호출 하 는 것 을 나타 낸다.불 값 은 false 로 거품 단계 에서 이벤트 처리 함 수 를 호출 하 는 것 을 표시 합 니 다.addEventListener () 를 호출 하여 추 가 된 이벤트 처리 프로그램 은 removeEventListener () 를 통 해 만 제거 할 수 있 습 니 다. 제거 할 때 들 어 오 는 매개 변수 와 처리 프로그램 을 추가 할 때 사용 하 는 매개 변 수 는 일치 해 야 합 니 다.그래서 addEventListener () 를 통 해 추 가 된 익명 함 수 를 제거 할 수 없습니다.DOM 0 급 과 마찬가지 로 이벤트 처리 프로그램 도 그 에 따 른 요소 역할 을 수행 합 니 다.대부분의 경우 이벤트 처리 프로그램 을 이벤트 흐름 의 거품 단계 에 추가 하면 각종 브 라 우 저 를 최대한 호 환 할 수 있 습 니 다.IE 이벤트 처리 프로그램: 두 가지 방법: attachEvent () 와 detachEvent ().두 개의 인 자 를 받 습 니 다: 처리 할 이벤트 이름 은 이벤트 처리 프로그램의 함수 입 니 다.상기 두 가지 상황 과 의 주요 차이 점 은 역할 영역 이 다르다 는 것 이다. attachEvent () 와 detachEvent () 는 전체 역할 영역 에서 실 행 될 것 이다.역할 영역의 차 이 를 제외 하고 DOM 2 급 과 IE 이벤트 처리 프로그램 은 여러 개의 이벤트 처리 프로그램 을 추가 할 수 있 으 며, OM0 급 은 하나만 추가 할 수 있 습 니 다.
이벤트 및 이벤트 대상 대상 가 져 오기
이벤트: 이벤트 처리 대상, 특정 이벤트 생 성 과 관련 된 속성 과 방법 을 포함 합 니 다.그 중 target (사건 의 목표) 은 그 중의 한 구성원 이다.DOM 을 호 환 하 는 브 라 우 저 에서 이벤트 대상 은 간단 한 전송 과 반환 일 뿐 입 니 다.IE 에서 이벤트 인 자 는 정 의 된 것 이기 때문에 window. event 로 돌아 갑 니 다.이벤트 의 목 표를 되 돌려 줍 니 다. IE 는 event. srcElemnt 입 니 다.
브 라 우 저 기본 이벤트 및 거품 방지 호환성 쓰기
브 라 우 저 기본 이벤트 막 기: IE 에 서 는 이벤트. returnValue = false 로 이벤트 거품 막 기: IE 에 서 는 cancelBubble = true 입 니 다. IE 에 서 는 이벤트 거품 만 발생 하기 때문에 이벤트 거품 을 없 앨 수 밖 에 없습니다.stop Propagatation () 은 사건 의 거품 을 막 을 수도 있 고 사건 의 포획 을 막 을 수도 있다.
mouseover 와 mouseout 이벤트 관련 요소 정보 가 져 오기
DOM 은 이벤트 대상 의 relatedTarget 속성 을 통 해 관련 요소 의 정 보 를 제공 합 니 다.이 속성 은 mouseover 와 mouseout 이벤트 에 만 값 을 포함 하고 다른 이벤트 에 대해 서 는 null 입 니 다.mouseover 이벤트 가 실 행 될 때 IE 의 from Element 속성 은 관련 요 소 를 저장 하고 mouseout 이벤트 가 실 행 될 때 IE 의 toElement 속성 은 관련 요 소 를 저장 합 니 다.
마우스 휠 판단
마우스 휠 의 증 가 를 얻 을 수 있 는 방법
이 이벤트 의 호환성 문 제 는 opera, Firefox 와 다른 브 라 우 저 사이 에 존재 합 니 다.
크로스 브 라 우 저 문자 인 코딩 획득
IE9, Firefox, Chrome, Safari 의 이벤트 대상 은 모두 charcode 속성 을 지원 하 며, keypress 이벤트 가 발생 할 때 만 값 을 포함 합 니 다.값 은 그 키 를 누 르 면 대응 하 는 ASCII 인 코딩 입 니 다.IE8 및 이전 버 전과 Opera 는 키 코드 를 사용 합 니 다.
클립보드 의 데이터 에 접근, 설정
클립보드 에 있 는 데 이 터 를 방문 하려 면 클립 보드 Data 대상 을 사용 할 수 있 습 니 다. IE 에서 이 대상 은 window 대상 의 속성 입 니 다.Firefox, Chrome, Safari 에서 이 대상 은 이벤트 대상 의 속성 입 니 다.
setAttribute('style','color:red;')
FIREFOX 지원 (IE 제외, 현재 모든 브 라 우 저 지원), IE 지원 하지 않 음
해결 방법: setAttribute ('style', 'color: red') 를 사용 하지 않 습 니 다.
object. style. cstext = 'color: red;'(이 표기 법 에 도 예외 가 있다)
가장 좋 은 방법 은 위의 방법 을 모두 써 서 만전 을 기 하 는 것 이다.
클래스 이름 설정
class 속성 은 W3C DOM 에서 중요 한 역할 을 하지만 브 라 우 저 차이 가 존재 합 니 다.setAttribute ("class", vName) 문 구 를 사용 하여 Element 의 class 속성 을 동적 으로 설정 합 니 다. fireforx 에 서 는 통 하지만 IE 에 서 는 안 됩 니 다.IE 커 널 을 사용 하 는 브 라 우 저 는 "class" 를 모 르 기 때문에 "className" 을 사용 해 야 합 니 다.마찬가지 로 Firefox 도 'className' 을 모른다.그래서 자주 사용 하 는 방법 은 두 가 지 를 겸비 하 는 것 이다.
element.setAttribute("class", vName);element.setAttribute("className", vName); //for IEIE 와 FF 는 object. className 을 지원 합 니 다.
setAttribute 로 이벤트 설정 하기
var obj = document.getElementById('objId'); obj.setAttribute('onclick','funcitonname()');이 방법 은 FIREFOX 지원, IE 지원 하지 않 습 니 다.
IE 에 서 는 필요 한 이벤트 처리 프로그램 을 점 표기 법 으로 참조 하고 익명 함 수 를 다음 과 같이 부여 해 야 합 니 다. var obj = document. getElement ById ('objectId');obj.onclick=function(){fucntionname();};이 방법 은 모든 브 라 우 저 를 지원 합 니 다.
선택 단추 만 들 기
IE 이외 의 다른 브 라 우 저 var rdo = document. createElement ('input');rdo.setAttribute('type','radio'); rdo.setAttribute('name','radiobtn'); rdo.setAttribute('value','checked');IE 브 라 우 저 var rdo = document. createElement (");
질문
문제 설명: innerText 는 IE 에서 정상적으로 작 동 하지만 innerText 는 FireFox 에 서 는 안 된다.해결 방법: innerText 대신 IE 브 라 우 저 에서 textContent 를 사용 합 니 다.예시:

if(navigator.appName.indexOf("Explorer") >-1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
}

[주] innerHTML 은 ie, fireforx 등 브 라 우 저 에 의 해 동시에 지원 되 며, 다른 것 은 outerHTML 등 은 ie 에 의 해 만 지원 되 므 로 사용 하지 않 는 것 이 좋 습 니 다.
질문
i, fireforx 및 기타 브 라 우 저 는 table 태그 에 대한 동작 이 각각 다 릅 니 다. i 에 서 는 table 과 tr 의 innerHTML 할당 을 허용 하지 않 습 니 다. js 를 사용 하여 tr 를 추가 할 때 appendChild 방법 을 사용 해도 사용 되 지 않 습 니 다. document. appendChild 는 표 에 줄 을 삽입 할 때 FIREFOX 지원, IE 는 지원 하지 않 습 니 다.
접근 하 는 부모 요소 의 차이
문제 설명: IE 에서 obj. parent Element 또는 obj. parent Node 를 사용 하여 obj 의 부모 노드 를 방문 합 니 다.fireforx 에서 obj. parent Node 를 사용 하여 obj 의 부모 노드 를 방문 합 니 다.해결 방법: fireforx 와 IE 는 DOM 을 지원 하기 때문에 obj. parentNode 를 통일 적 으로 사용 하여 obj 의 부모 노드 를 방문 합 니 다.
질문
문제 설명: IE 에서 even 대상 은 x, y 속성 이 있 지만 pageX, pageY 속성 이 없습니다.Firefox 에서 even 대상 은 pageX, pageY 속성 이 있 지만 x, y 속성 이 없습니다.해결 방법: var myX = event. x?event.x : event.pageX; var myY = event.y ? event.y:event.pageY;
질문
문제 설명: IE 에서 document. formName. item ("itemName") 또는 document. formName. elements ["element Name"] 를 사용 할 수 있 습 니 다.Firefox 에 서 는 document. formName. elements ["element Name"] 만 사용 할 수 있 습 니 다.해결 방법: document. formName. elements ["element Name"] 를 통일 적 으로 사용 합 니 다.
질문
문제 설명: IE 에서 일반적인 속성 을 가 져 오 는 방법 으로 사용자 정의 속성 을 가 져 올 수도 있 고 getAttribute () 를 사용 하여 사용자 정의 속성 을 가 져 올 수도 있 습 니 다.Firefox 에 서 는 getAttribute () 를 사용 하여 사용자 정의 속성 을 가 져 올 수 있 습 니 다.해결 방법: getAttribute () 를 통 해 사용자 정의 속성 을 통일 적 으로 가 져 옵 니 다.
질문
문제 설명: IE 에서 () 또는 [] 를 사용 하여 집합 대상 을 얻 을 수 있 습 니 다.Firefox 에 서 는 집합 대상 을 [] 로 만 가 져 올 수 있 습 니 다.해결 방법: 집합 대상 을 통일 적 으로 사용 합 니 다.
질문
질문 설명: IE 에서 eval ("idName") 이나 getElement ById ("idName") 를 사용 하여 id 가 idName 인 HTML 대상 을 얻 을 수 있 습 니 다.Firefox 에 서 는 getElement ById ("idName") 를 사용 하여 id 를 idName 의 HTML 대상 으로 만 가 져 올 수 있 습 니 다.해결 방법: getElement ById ("idName") 로 id 를 idName 의 HTML 대상 으로 통일 합 니 다.
질문
문제 설명: Firefox 에서 const 키워드 나 var 키 워드 를 사용 하여 상수 정 의 를 할 수 있 습 니 다.IE 에서 var 키 워드 를 사용 하여 상수 (IE 11 해결) 를 정의 할 수 있 습 니 다.해결 방법: var 키 워드 를 통일 적 으로 사용 하여 상수 를 정의 합 니 다.
질문
문제 설명: IE 에서 input. type 속성 은 읽 기 전용 입 니 다.하지만 Firefox 에서 input. type 속성 은 읽 기와 쓰기 입 니 다.해결 방법: input. type 속성 을 수정 하지 않 습 니 다.수정 이 필요 하 다 면 원래 의 input 를 숨 긴 다음 같은 위치 에 새로운 input 요 소 를 삽입 할 수 있 습 니 다.
이벤트 의뢰 방법
문제 설명: IE 에서 document. body. onload = inject 를 사용 합 니 다.그 중에서 function inject () 는 그 전에 실현 되 었 습 니 다.Firefox 에서 document. body. onload = inject () 를 사용 합 니 다.해결 방법: document. body. onload = new Function ('inject ()') 을 통일 적 으로 사용 합 니 다.혹은 document. body. onload = function ()
질문
문제 설명: FireFox 에서 obj. style. height = imgObj. height 와 유사 한 문구 가 잘못 되 었 습 니 다.해결 방법: obj. style. height = imgObj. height + 'px' 를 통일 적 으로 사용 합 니 다.