>  기사  >  웹 프론트엔드  >  JavaScript는 이벤트 object_javascript 기술의 주목 포인트를 얻습니다.

JavaScript는 이벤트 object_javascript 기술의 주목 포인트를 얻습니다.

WBOY
WBOY원래의
2016-05-16 18:49:101324검색

보통 이벤트 객체는 다음과 같이 작성합니다.

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

function getEvent(event) {
return event || window.event // IE:window.event
}

매개변수가 없으면 IE가 아닌 경우: 이벤트 개체가 해당 이벤트 처리 함수에 자동으로 전달되며 첫 번째 매개변수입니다.
코드 복사 코드는 다음과 같습니다.

function getEvent() {
return 인수[0] || window.event // IE:window.event
}

이 작성 ​​방법은 Firefox를 제외하고는 잘 작동합니다(테스트 버전: 3.0.12, 이하 동일). 다른 브라우저에서는 실행에 문제가 없을 텐데 Firefox는 왜 예외인가요? 다음과 같은 상황을 가정해 보겠습니다.
코드 복사 코드는 다음과 같습니다.

< ;button id= "btn" onclick="foo()">Button
<script> <br>function foo(){ <br>var e = getEvent()>alert (e) ;} <br></script>

Firefox에서 실행 결과가 정의되지 않은 이유는 무엇입니까?
Firefox의 실제 호출은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.
function onclick(event) {
foo()
}

그런 다음 호출이 실행됩니다.

코드 복사 코드는 다음과 같습니다.
function foo(){
var e = getEvent()
Alert(e);
}

Firefox의 onclick="foo()"에 있는 foo()는 이벤트 객체 매개변수를 자동으로 전달할 수 없지만 onclick으로 전달됩니다. 함수는 기본적으로 시스템에서 생성됩니다. 예를 들어 getEvent.caller.caller.arguments[0]을 통해 이벤트 객체를 가져올 수 있습니다.
따라서 getEvent를 다음과 같이 최적화할 수 있습니다(yui_2.7.0b의 event/event-debug.js에 있는 getEvent 메소드 참조).

코드 복사 코드는 다음과 같습니다.
function getEvent(event) {
var ev = event || window.event
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0]
if (ev && (Event == ev.constructor || MouseEvent) == ev.constructor)) { /Yi Fei 참고: YUI 소스 코드 BUG, ​​​​ev.constructor는 반드시 이벤트가 아닐 수도 있습니다.
break
}
c = c.caller; 🎜>}
}
return ev;
}


물론 onclick="foo()"에 매개변수를 수동으로 전달하는 매우 간단한 해결책이 있습니다. :




성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.