덜 말도 안되는 예제 코드를 제공하십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 eventUtil () {
var _self = this;
/// 이벤트 추가
var addevent = (function () {
if (document.addeventListener) {
반환 함수 (el, type, fn) {
el.addeventListener (유형, fn, false);
}
} 또 다른 {
반환 함수 (el, type, fn) {
el.attachevent ( "on" + type, function () {
return fn.call (el, window.event);
});
}
}
}) ();
/// 이벤트를 변경할 속성을 추가합니다
var addPropertyChangeEvent = function (obj, fn) {
if (window.activexObject) {
obj.onpropertychange = fn;
} 또 다른 {
obj.addeventListener ( "입력", fn, false);
}
}
// 이벤트를 제거합니다
var removeEvent = function (obj, type, fn) {
if (obj.removeeventListener) {
obj.removeeventListener (유형, fn, false);
} else if (obj.detachevent) {
obj.detachevent ( "on" + type, obj [ "on" + type + fn]);
obj [ "on" + type + fn] = null;
}
}
// 이벤트로드
var loadevent = function (fn) {
var oldonload = Window.onload;
if (OldOnload! = "function") {
Window.onload = fn;
} 또 다른 {
Window.onload = function () {
oldonload ();
fn ();
}
}
}
// 이벤트 차단
var stopevent = function (e) {
e = e || Window.event;
if (e.preventDefault) {
e.preventDefault ();
E.StopPropagation ();
} 또 다른 {
e.returnvalue = false;
e.cancelbubble = true;
}
}
// 이벤트가 버블 링되는 것을 방지하는 것이라면
var stoppropagation = function (e) {
e = e || Window.event;
if (!+"/v1") {
e.cancelbubble = true;
} 또 다른 {
E.StopPropagation ();
}
}
// 이벤트 소스 객체를 가져옵니다
var getEvent1 = function (e) {
e = e || Window.event;
var obj = e.srcelement? e.srcelement : e.target;
반환 obj;
}
// 이벤트 소스 객체를 가져옵니다
var getEvent2 = function (e) {
if (window.event) return Window.event;
var c = getevent2.caller;
while (c.caller) {
C = C.Caller;
}
반환 c.arguments [0];
}
//이 기능이 더 강력합니다
var getEvent3 = function (e) {
var e = e || Window.event;
if (! e) {
var c = this.getevent3.caller;
while (c) {
e = c. arguments [0];
if (e && (event == e.constructor || mouseevent == e.constructor)) {
부서지다;
}
C = C.Caller;
}
}
var target = e.srcelement? E.Srcelement : E.Target,
currentn = target.nodename.tolowercase (),
parentn = target.parentnode.nodename.tolowercase (),
grandn = target.parentNode.parentNode.nodename.tolowercase ();
반품 [e, target, currentn, parentn, grandn];
}
_self.addevent = addevent;
_self.AddPropertyChangeEvent = addPropertyChangeEvent;
_self.removeEvent = RemoveEvent;
_self.loadevent =로드 벤트;
_self.stopevent = stopevent;
_self.stoppropagation = stoppropagation;
_self.getevent1 = getEvent1;
_self.getevent2 = getEvent2;
_self.getevent3 = getEvent3;
}
var eventUtil = new eventUtil ();
eventUtil.loadevent (function () {
eventUtil.AdDevent (문서, "클릭", 함수 (e) {
경고 (eventUtil.getevent3 (e));
});
eventUtil.AddPropertyChangeEvent (문서, 함수 (e) {
경고 (eventUtil.getevent3 (e));
});
});
</스크립트>
JavaScript 이벤트 처리는 캡처 처리 버블의 세 단계로 나뉩니다.
예를 들어 버튼을 클릭하십시오.
캡처 스테이지 : 외부 레이어에서 내부 레이어까지 먼저 창에 등록 된 클릭 캡처 스테이지 모니터링 방법을 호출 한 다음 레이어, 버튼 자체에 따라 문서, 본문, 부모 노드 레이어를 호출하십시오.
처리 단계 : 버튼 자체의 클릭 청취 방법을 호출하십시오.
버블 스테이지 : 버튼에서 시작하여 내부 레이어에서 외부 층까지 각 레벨에서 부모 노드의 버블 스테이지 모니터링 방법을 호출하십시오.
그러나 IE8 및 IE의 경우 캡처 위상이 지원되지 않으므로 캡처 단계에서의 이벤트 청취는 아직 일반적이지 않습니다.
일반적인 이벤트 처리 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 이벤트 핸들러 (e) {
e = e || Window.event;
var target = e.target || e.srcelement;
... ...
}
e는 이벤트 객체입니다. 이벤트가 트리거되면 매개 변수로 전달됩니다. 그러나 IE8 및 하위 버전의 IE에는 적용 할 수 없습니다. 글로벌 이벤트 변수를 통해서만 액세스 할 수 있습니다. 다행히도 두 이벤트가 동시에 처리되는 상황은 없습니다.