Firefox 및 ie 이벤트 처리, 연구 및 추가 연구에 대한 세부 정보 ie 및 ff_javascript 기술과 호환되는 이벤트 처리 코드 작성

IE에서는 이벤트 객체가 전역 변수로 저장되어 유지됩니다. 사용자 또는 다른 이벤트에 의해 트리거되는 모든 브라우저 이벤트는 window.event 객체를 업데이트합니다. 따라서 코드에서는 간단히 window.event를 호출하여 이벤트 객체를 쉽게 얻을 수 있으며, event.srcElement를 사용하여 추가 처리를 위해 이벤트를 트리거한 요소를 얻을 수 있습니다. 일반적으로 이벤트 객체는 전역 객체가 아닙니다. , 현장에서 발생합니다. , 현장에서 사용되면 ff는 이벤트 개체를 해당 이벤트 처리 기능에 자동으로 전달합니다. 코드에서 함수의 첫 번째 매개변수는 ff 아래의 이벤트 객체입니다.
위 내용은 두 브라우저에서의 이벤트 처리 방법에 대한 개인적인 이해로,
자세히 설명

하기 위해 코드를 작성했습니다. 코드 복사 코드는 다음과 같습니다.

Button 1 버튼 id ="btn2">Button2
Button3
<script>window.onload=function(){ <BR>document.getElementById("btn1").onclick=foo1 <BR>document.getElementById("btn2").onclick=foo2 <BR>document.getElementById("btn3").onclick=foo3 <BR>} <BR>function foo1(){ <BR>//즉, window.event는 전역 객체를 만듭니다. <BR>alert(window.event) // ie 아래에는 "[object]"가 표시되고, ff 아래에는 "undefine"이 표시됩니다. 표시됩니다 <BR> //ff에서는 첫 번째 매개변수가 이벤트 객체에서 자동으로 변경됩니다. <BR>alert(arguments[0]) // 즉, 아래에서는 "정의되지 않음"이 표시되고, ff 아래에서는 "[object]"가 표시됩니다. <BR>} <BR>function foo2(e){ <BR>alert(window.event) // ie 아래에는 "[object]"가 표시되고, ff 아래에는 "undefine"이 표시됩니다 <BR>//참고 , foo2에 매개변수를 전달한 적이 없습니다. 이제 ff는 자동으로 매개변수를 foo2에 전달하고 전달된 매개변수 e는 이벤트 객체입니다. <BR>alert(e) // 즉, 아래에서는 "정의되지 않음"을 표시하고, ff 아래에서는 "[객체]"를 표시합니다 <BR>} <BR>function foo3 (){ //ie 및 ff 작성 방법과 모두 호환되며, 이벤트 객체를 가져옵니다. <BR>alert(arguments[0] || window.event) // ie와 ff 모두에서 "[object]" <BR>var evt =arguments[0] || window.event <BR>var element=evt.srcElement || evt.target //ie 및 ff에서 btn3 객체 가져오기 <BR>alert(element.id) / / btn3 <BR>} <BR></script>


이것을 보니 ie와 ff의 이벤트 처리 방식을 이해하고 해결 방법을 찾은 것 같습니다.
하지만. . . . 아직 끝나지 않았습니다.

코드 보기

코드 복사 코드는 다음과 같습니다. < ;button id="btn " onclick="foo()">버튼 1

<script> <div class="codebody" id="code68791">function foo(){ <BR>alert(arguments[0] || window. event) <BR>} <BR></script>


안타깝게도 foo가 제공하는 결과는 예상된 개체가 아니라 정의되지 않았습니다.
이유는 이벤트가 바인딩되는 방식입니다. 🎜>onclick=" foo()"가 직접 실행됩니다. foo() 함수에는 매개변수가 없습니다. 이 경우 Firefox는 foo에 매개변수를 전달할 기회가 없습니다.
이 경우 btn. onclick=foo, 왜냐하면 함수를 실행한 후에만 firefox는 foo에 매개변수를 전달할 기회를 갖습니다.
해결책:
방법 1: 어리석은 방법입니다. Firefox는 매개변수를 전달할 기회가 없으므로, 부지런히 노력하십시오.




코드 복사

코드는 다음과 같습니다. Button< ;/button> <script> </script>

function foo(){

alert(arguments[0] || window.event)
var evt=arguments[0] || window.event
var element=evt.srcElement || evt.target
alert(element.id)
}
>

방법 2: 자동 검색

코드 복사

코드는 다음과 같습니다. 버튼 4 <script> </script>function foo4(){

var evt=getEvent()

var element=evt.srcElement || evt.target
Alert(element.id)
}
function getEvent(){ //ie 및 ff 모두와 호환 가능
if(document .all) return window.event;
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0) 🎜>if((arg0.constructor==Event || arg0.constructor = =MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller
}
return null;
}


방법 2는 원래 Lostinet에서 만들었으며 이를 개선하여 원래 기능은 다음과 같습니다.

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)
return arg0
}
func=func.caller
return null
}


간단한 요약:
위 둘 다 솔루션에서는 ff 및 ie에서 이벤트 처리가 올바르게 처리됩니다(onclick="foo()"인지 여부). 또는 onclick=foo)
하지만 개인적으로 이벤트 문제를 균일하게 처리하려면 getEvent() 메서드를 사용하는 것이 좋습니다.
지금은 여기까지입니다. 계속하겠습니다. .