Firefox 에 이벤트 대상 구현 코드 지원

일반적으로 IE 와 FireFox 를 호 환 하기 위해 일반적인 이벤트 처리 방법 은 다음 과 같다.그러면 모든 방법 은 이 벤트 를 전달 해 야 합 니 다.이것 은 악몽 입 니 다.다음은 이 번 거 로 운 일 을 해결 하 는 방법 과 원 리 를 소개 합 니 다.JScript 에서 함수 호출 은 func.caler 라 는 속성 이 있 습 니 다.예 를 들 어

 
btn.onclick=handle_btn_click; 
function handle_btn_click(evt){ 
if(evt==null)evt=window.event;//IE 
//    . 
} 

B 가 A 에 호출 되면 B.caller 는 A 입 니 다.함수 에 arguments 속성 이 있 습 니 다.이 속성 은 함수 가 현재 실행 하고 있 는 인 자 를 옮 겨 다 닐 수 있 습 니 다.

 
function A() 
{ 
B(); 
} 
function B() 
{ 
alert(B.caller); 
} 

hello-world-1-2-3(arguments 의 개 수 는 호출 자 와 관련 이 있 으 며 함수 의 매개 변수 정의 와 아무런 관계 가 없습니다)이 두 속성 에 따라우 리 는 첫 번 째 함수 의 이벤트 대상 을 얻 을 수 있 습 니 다.

 
function myalert() 
{ 
var arr=[]; 
for(var i=0;i<myalert.arguments.length;i++) 
arr[i]=myalert.arguments[i]; 
alert(arr.join("-")); 
} 
myalert("hello","world",1,2,3) 

이 예 는 SearchEvent 를 사용 하여 이벤트 대상 을 검색 합 니 다.그 중에서'Event'는 FireFox 의 event.constructor 입 니 다.이 예 가 실 행 될 때 SearchEvent.caller 는 showcontent 입 니 다.그러나 showcontent.arguments[0]는 비어 있 습 니 다.그래서 func=func.caler 는 func 가 handle 로 변 합 니 다.click . handle_click 은 FireFox 에 호출 되 었 습 니 다.매개 변 수 를 정의 하지 않 았 지만 호출 되 었 을 때 첫 번 째 매개 변 수 는 이벤트 이기 때문에 handleclick.arguments[0]바로 이벤트!위의 지식 에 대하 여 우 리 는 prototype. 와 결합 할 수 있 습 니 다.defineGetter__ window.event 가 FireFox 에서 의 실현 을 실현 합 니 다.다음은 간단 한 코드 를 드 리 겠 습 니 다.관심 있 는 것 은 보충 할 수 있 습 니 다(본인 은 이미 수정 되 었 습 니 다)

 
btn.onclick=handle_click; 
function handle_click() 
{ 
showcontent(); 
} 
function showcontent() 
{ 
var evt=SearchEvent(); 
if(evt&&evt.shiftKey)//          ,  shift    
window.open(global_helpurl); 
else 
location.href=global_helpurl; 
} 
function SearchEvent() 
{ 
func=SearchEvent.caller; 
while(func!=null) 
{ 
var arg0=func.arguments[0]; 
if(arg0) 
{ 
if(arg0.constructor==Event) //     event    
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 

javascript 과 JScript 도 다 릅 니 다.전 자 는 클 라 이언 트 의 스 크 립 트 입 니 다.후 자 는 서버 의 스 크 립 트 와 VBScript 처럼 서버 에서 지원 합 니 다.물론 저 는 두 가지 차이 점 을 말 하려 는 것 이 아 닙 니 다.다만 자신의 현재 수준 을 알 게 하 는 것(보통 차이 가 아니다)...위의 코드 만 제시 했다 면 처음에 호환성 을 가 지 려 고 했 던 친구 들 은 이 코드 들 의 용 도 를 이해 하기 어 려 울 것 이 라 고 믿 습 니 다.여기 위 에 있 는 코드 들 의 용법 을 일일이 설명해 드 리 겠 습 니 다.먼저 보 겠 습 니 다defineGetter__와defineSetter__이 두 가지 방법 에 대한 설명 입 니 다.하 나 는 Getter 는 하나의 속성의 값 을 얻 는 방법 입 니 다.Setter 는 하나의 속성의 값 을 설정 하 는 방법 입 니 다.미리 정 의 된 핵심 대상 이나 사용자 정의 대상 에 게 getter 와 setter 방법 을 정 하여 기 존 대상 에 게 새로운 속성 을 추가 할 수 있 습 니 다.2.대상 과 이벤트 에 새로운 속성 을 언제 추가 할 수 있 습 니까?1.대상 이 초기 화 될 때 정의 2.대상 이 정 의 된 후 Object 를 통과 하 는defineGetter__、__defineSetter__방법 은 상세 한 용법 을 추가 로 정의 할 수 있 습 니 다.여기 보 세 요.대defineGetter__、__defineSetter__의 설명(주소:http://anbutu.javaeye.com/blog/post/194276)그래서 우 리 는 Fix Prototype ForGecko()함수 에 각각 세 개의 대상 에 게 속성 을 추가 한 것 을 보 았 습 니 다.당연히 FF 에서 대상 에 대한 추가 입 니 다.HTML Element 은"runtime Style"속성 을 추 가 했 고 속성 값 은 element 입 니 다.prototype_get_runtime Style 함수 의 반환 값 window 는"이벤트"속성 을 추 가 했 습 니 다.속성 값 은 window 입 니 다.prototype_get_이벤트 반환 값 이벤트 에"srcElement"속성 이 추가 되 었 습 니 다.기본 속성 값 은 이벤트 입 니 다.prototype_get_srcElement 함수 가 되 돌려 주 는 값 은 이 세 대상 을 위해 FF 에서 새로운 속성 을 확장 합 니 다.그래서 우 리 는 브 라 우 저가 FF 인지 판단 한 후에 Fix Prototype ForGecko()과정 을 실 행 했 습 니 다.이때 FF 에서 이 세 대상 에 게 새로운 속성 이 생 겼 습 니 다.그래서 DIV 탭 을 누 르 면 팝 업 창 에서"[object HTML DivElement]"라 는 글 자 를 보 았 습 니 다.윈도 대상 에 이벤트 속성 을 추가 하 는 데 성공 했다 는 뜻 이기 도 합 니 다

 
<script language="javascript"> 
function handle_click() { 
if(window.addEventListener) 
{ 
FixPrototypeForGecko(); 
alert(window.event.srcElement) 
} 
} 
function FixPrototypeForGecko() 
{ 
HTMLElement.prototype.__defineGetter__("runtimeStyle",element_prototype_get_runtimeStyle); 
window.constructor.prototype.__defineGetter__("event",window_prototype_get_event); 
Event.prototype.__defineGetter__("srcElement",event_prototype_get_srcElement); 
} 
function element_prototype_get_runtimeStyle() 
{ 
//return style instead... 
return this.style; 
} 
function window_prototype_get_event() 
{ 
return SearchEvent(); 
} 
function event_prototype_get_srcElement() 
{ 
return this.target; 
} 
function SearchEvent() 
{ 
//IE 
if(document.all) 
return window.event; 
func=SearchEvent.caller; 
while(func!=null) 
{ 
var arg0=func.arguments[0]; 
if(arg0) 
{ 
//if(arg0.constructor==Event) 
if(arg0.constructor==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 
</script> 
<div id="mydiv" onclick="handle_click();">click here!!</div> 

elementprototype_get_runtime Style 과정 과 이벤트prototype_get_srcElement 과정 때문에 돌아 오 는 값 을 쉽게 이해 할 수 있 습 니 다.다음은 windowprototype_get_이벤트()과정 이 어떻게 사건 을 되 돌려 주 는 과정의 반환 값 은 SearchEvent()과정의 결과 입 니 다.이 과정

 
if(window.addEventListener) { 
FixPrototypeForGecko(); 
alert(window.event.srcElement) 
} 

을 보고 이 과정 을 이해 하려 면 먼저 두 가지 방법 을 알 아야 합 니 다.caller 와 arguments(글 위 에 해당 하 는 해석 이 있 습 니 다)는 여기 서 constructor 구조 자 라 는 속성 을 설명 합 니 다.대상 의 해당 대상 을 되 돌려 주 는 창조 자 는 while 순환 에서 alert(func)를 보면 func.caler 의 귀환 을 볼 수 있 습 니 다.마지막 으로 돌아 오 는 것 은 우리 의 마우스 클릭 이벤트 입 니 다.handleclick()과정 은 우리 가 div 를 클릭 한 후에 실 행 된 것 이기 때문에 마지막 func.caler 는 우리 의 클릭 이벤트 입 니 다.이때 의 funcj 는 handle 입 니 다.click(),그러면 handleclick.caler,당연히 handleclick 의 호출 자 는 당연히 onclick 이벤트 입 니 다.즉,[Mouse Event]에서 제 가 if(arg 0.constructor==Event|arg 0.constructor==Mouse Event)에 조건 을 추가 한 것 을 볼 수 있 습 니 다.arg0.constructor 의 현재 결과 가 Mouse Event 이기 때 문 입 니 다.FF 에서 이 벤트 를 어떻게 만 드 는 지 아 실 거 라 고 믿 습 니 다.마지막 으로"addEvent Listener"를 대상 으로 이벤트 등록 방법

 
function SearchEvent() 
{ 
//IE 
if(document.all) 
return window.event; 
func=SearchEvent.caller; 
while(func!=null) 
{ 
var arg0=func.arguments[0]; 
if(arg0) 
{ 
//if(arg0.constructor==Event||arg0.constructor==MouseEvent) 
if(arg0.constructor==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
return arg0; 
} 
func=func.caller; 
} 
return null; 
} 

을 말씀 드 리 겠 습 니 다.