일반적으로 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를 구현하려면:
아래에 간단한 코드가 제공됩니다. 관심이 있으시면 추가하실 수 있습니다. (이미 수정했습니다.)
코드 복사
코드는 다음과 같습니다. 여기를 클릭하세요!!
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(队列)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
