IE의 JS 이벤트와 FF_javascript 기술의 차이점에 대한 자세한 분석

Zhidao Yisou 프로젝트의 검색 카테고리는 JS를 통해 동적으로 생성되며, 생성된 각 요소에는 속성과 이벤트가 동적으로 추가되어야 합니다. 그 중 속성 추가는 값을 할당하여 수행할 수 있으며 이는 IE와 FF 모두에 적용 가능합니다. 예:

var 요소 = document.createElement('select');

element.id = "myselect";

위 명령문은 IE와 FF에서 동일한 효과를 가지며 정상적으로 실행됩니다. 그러나 우리가 생성하는 대부분의 요소는 이벤트를 동적으로 추가해야 합니다. 분명히 속성을 추가하는 것처럼 끝에 점을 직접 추가한 다음 이벤트 이름을 쓴 다음 그 뒤에 코드 문자열을 추가할 수는 없습니다. 오류가 보고됩니다. 따라서 다음 방법을 사용하여 이벤트를 추가할 수 있습니다.

우선 현재 브라우저가 어떤 브라우저인지 확인해야 합니다.

여전히 이전 정의를 사용합니다.

if( element.attachEvent ){

//IE 및 IE 코어가 있는 브라우저의 경우 (1)

}else if( element.addEventListener){

//FF 및 NS 코어가 있는 브라우저(2)

}

위의 if 문 블록은 현재 브라우저가 IE인지 FF인지 확인하는 데 도움이 됩니다.

브라우저가 이를 결정한 다음 우리가 해야 할 일은 해당 기능을 요소에 등록하는 것뿐입니다. 아래에는 우리가 정의한 기능적 기능이 나와 있습니다.

함수 showElementId(elmt){

경고(elmt.id);

}

함수는 매우 간단합니다. 매개변수에 요소의 ID를 묻는 것입니다.

IE 브라우저인 경우 위의 주석(1)에 다음 코드를 삽입합니다.

element.attachEvent( "onclick",function(){showElementId(elmt)});

FF 브라우저인 경우 위의 주석(2)에 다음 코드를 삽입합니다.

var eventName = "onclick".replace(/on(.*)/i,'$1');
element.addEventListener( eventName,function(){showElementId(elmt)},false);

FF에서 요소에 대한 이벤트를 등록할 때 이벤트 이름 앞에 "on"을 붙일 필요가 없으므로 on을 바꿔야 합니다.

좋아요, 나중에 개발 프로젝트의 동료가 JS를 사용하여 요소에 이벤트를 동적으로 추가해야 하는 경우 위의 방법을 사용할 수 있습니다. 그렇게 하면 FF 브라우저를 사용할 때 열심히 개발한 기능을 사용자가 사용하지 못하는 것을 방지할 수 있습니다.