>웹 프론트엔드 >JS 튜토리얼 >Firefox 및 ie 이벤트 처리, 연구 및 추가 연구에 대한 세부 정보 ie 및 ff_javascript 기술과 호환되는 이벤트 처리 코드 작성

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

WBOY
WBOY원래의
2016-05-16 19:14:57900검색

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

하기 위해 코드를 작성했습니다. 코드 복사 코드는 다음과 같습니다.
버튼 id ="btn2">Button2

<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는 매개변수를 전달할 기회가 없으므로, 부지런히 노력하십시오.




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

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