Firefox에서 이벤트 객체 구현 code_javascript 기술을 지원하도록 허용

일반적으로 IE 및 FireFox와 호환되기 위한 일반적인 이벤트 처리 방법은

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

btn.onclick=handle_btn_click;
function handler_btn_click(evt){
if(evt==null)evt=window.event;//IE
//이벤트 처리 .
}

간단한 프로그램의 경우에는 문제가 되지 않습니다.
그러나 일부 복잡한 프로그램의 경우 특정 기능이 이벤트와 전혀 직접 연결되지 않습니다.
다음은 이 문제를 해결하는 방법과 원리입니다.
JScript에서 함수 호출에는 func.caller 속성이 있습니다. 🎜>

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

function A()

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


B가 A 호출인 경우 B.caller는 A

또한 함수에는 인수 속성이 있습니다. 이 속성은 함수의 현재 실행 매개변수를 순회할 수 있습니다.

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

function myalert()

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


은 hello-world-1-2-3을 표시합니다.

(인수 수는 호출자와 관련되며 아무 것도 포함하지 않습니다. 관계의 매개변수 정의와 관련)
이 두 속성에 따라 첫 번째 함수의 이벤트 개체를 가져올 수 있습니다:

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

btn.onclick=handle_click;

function handler_click()
{
showcontent(); }
function showcontent()
{
var evt=SearchEvent()
if(evt&&evt.shiftKey)//이벤트 기반 호출이고 Shift 키를 누른 경우
창. 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) // 이벤트 객체인 경우
return arg0;
}
func= func.caller;
}
return null;
}


이 예에서는 SearchEvent를 사용하여 이벤트를 검색합니다. 여기서 'Event'는 FireFox의 event.constructor입니다.
이 예제를 실행하면

SearchEvent.caller는 showcontent이지만 showcontent.arguments[0]은 비어 있습니다. handler_click.
handle_click은 FireFox에 의해 호출되지만, 정의된 매개변수는 아니지만 호출되면 첫 번째 매개변수가 이벤트이므로 handler_click.arguments[0]이 이벤트입니다.
위의 지식을 바탕으로 결합할 수 있습니다! 프로토타입.__defineGetter__ FireFox에서 window.event를 구현하려면:
아래에 간단한 코드가 제공됩니다. 관심이 있으시면 추가하실 수 있습니다. (이미 수정했습니다.)

코드 복사 코드는 다음과 같습니다. <script> </script>

function handler_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 스타일 대신...
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;

여기를 클릭하세요!!

Javascript와 JScript도 다릅니다. 전자는 클라이언트 측 스크립트이고 후자는 서버 측 스크립트이며 VBScript와 같이 서버에서 지원됩니다.
물론 여기서 이야기하려는 것은 아닙니다. 둘의 차이는 있지만 그냥 제 현재 수준(평균 아님)을 알려드리자면...
위 코드만 드린다면 이제 막 궁합공부를 시작하는 친구들은 힘들거라고 생각합니다.
여기서 설명하겠습니다. 먼저 위 코드의 사용법을 설명하겠습니다.
먼저 __defineGetter__ 및 __defineSetter__ 두 가지 메서드에 대한 설명을 살펴보겠습니다.
1. Getter는 메서드입니다. 속성 값을 가져오는 방법이고 Setter는 속성 값을 설정하는 방법입니다. 사전 정의된 핵심 개체 또는 사용자 정의 개체에 대해 getter 및 setter 메서드를 정의하여 기존 개체에 새 속성을 추가할 수 있습니다.
2. 언제 객체와 이벤트에 새로운 속성을 추가할 수 있나요?
1. 객체가 초기화되는 시기를 정의하세요
2. 객체를 정의한 후 Object자세한 사용법은 여기(주소: http://anbutu.javaeye.com/blog/post/194276)에서 __defineGetter__ 및 __defineSetter__에 대한 설명을 참조하세요.
그래서 우리는 FixPrototypeForGecko() 함수에 속성이 추가되는 것을 보았습니다. 물론 세 개의 객체는 각각 FF 아래에 추가됩니다.
HTMLElement는 "runtimeStyle" 속성을 추가하고 속성 값은 element_prototype_get_runtimeStyle 함수에서 반환된 값입니다.
창은 "event" 속성을 추가합니다. value는 window_prototype_get_event에서 반환된 값입니다.
Event는 "srcElement" 속성을 추가하고, 기본 속성 값은 event_prototype_get_srcElement 함수에서 반환된 값입니다.
이런 방식으로 FF그래서 브라우저가 FF인지 판단한 후 FixPrototypeForGecko() 프로세스를 실행합니다. 이때 이 세 객체는 FF 아래에 새로운 속성을 갖게 됩니다
그래서 DIV 태그를 클릭하면 팝업 창에 표시됩니다. "[object HTMLDivElement]"라는 단어에 도달하면 창 개체에 이벤트 속성을 성공적으로 추가했음을 의미합니다

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

if(window.addEventListener) {

FixPrototypeForGecko()
alert(window.event.srcElement)
}


element_prototype_get_runtimeStyle 프로세스와 event_prototype_get_srcElement 프로세스를 보면 반환된 값을 ​​​​쉽게 이해할 수 있습니다.

window_prototype_get_event() 프로세스가 어떻게 이벤트를 반환하는지 살펴보겠습니다
반환 프로세스의 값은 SearchEvent() 프로세스의 결과입니다.

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

function SearchEvent()

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

이 프로세스를 이해하려면 먼저 호출자와 인수라는 두 가지 방법을 이해해야 합니다(기사에 해당 설명이 있음)
여기서 생성자 속성에 대해 다시 설명하겠습니다. 반환되는 것은 해당 객체의 생성자입니다
그동안 루프, 경고(func) func.caller의 반환, 마지막 반환을 볼 수 있습니다. 이것이 마우스 클릭 이벤트입니다

div를 클릭한 후 handler_click() 프로세스가 실행되므로 최종 func.caller는 다음과 같습니다. 이때 funcj는 handler_click()이므로 꽤 입니다. 따라서 Handle_click.caller는 물론 Handle_click의 호출자는 물론 onclick 이벤트인 [MouseEvent]
추가한 것을 볼 수 있습니다. if(arg0.constructor==Event||arg0.constructor==MouseEvent) 의 조건, arg0.constructor의 현재 결과가 MouseEvent이기 때문입니다.
이것을 보고 나면 모두가 FF에서 이벤트를 작성하는 방법을 알고 있다고 믿습니다.
마지막으로 객체에 대한 이벤트 메소드를 등록하는 "addEventListener"에 대해 알아보겠습니다




코드 복사

코드는 다음과 같습니다.

function addObjectEvent(objId,eventName,eventFunc)
{
var targetObj = document.getElementById(objId);
if(targetObj)
{
if(targetObj.attachEvent)
{
targetObj.attachEvent(eventName,eventFunc);
}
else if(targetObj.addEventListener)
{
eventName = eventName.toString().replace(/on(.*)/i,'$1');
targetObj.addEventListener(eventName,eventFunc,true);
}
}
}
function test1()
{
alert('test1');
}
function test2()
{
alert('test2');
}

클릭 시

addObjectEvent('hi','onclick',test1);
addObjectEvent('hi','onclick',test2);//先执行test2(队列)