أقل هراء ، فقط أعط رمز المثال:
نسخة الكود كما يلي:
<script type = "text/javaScript">
وظيفة EventUtil () {
var _self = هذا ؛
/// إضافة حدث
var addevent = (function () {
if (document.adDeventListener) {
وظيفة الإرجاع (EL ، type ، fn) {
el.addeventListener (النوع ، fn ، false) ؛
}
} آخر {
وظيفة الإرجاع (EL ، type ، fn) {
el.attachevent ("on" + type ، function () {
إرجاع fn.call (el ، window.event) ؛
}) ؛
}
}
}) () ؛
/// إضافة سمات لتغيير الحدث
var addPropertyChangeEvent = function (obj ، fn) {
if (window.activexobject) {
obj.onpropertyChange = fn ؛
} آخر {
obj.addeventListener ("Input" ، fn ، false) ؛
}
}
// إزالة الحدث
var removeEvent = function (obj ، type ، fn) {
if (obj.removeeventListener) {
OBJ.RemoveEventListener (النوع ، fn ، false) ؛
} آخر إذا (obj.detachevent) {
obj.detachevent ("on" + type ، obj ["on" + type + fn]) ؛
OBJ ["on" + type + fn] = null ؛
}
}
// الحدث تحميل
var loadvent = function (fn) {
var oldonload = window.onload ؛
if (typeof 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) window.event ؛
var c = getEvent2.Caller ؛
بينما (c.caller) {
C = c.caller ؛
}
إرجاع c.arguments [0] ؛
}
// أو هذه الوظيفة أكثر قوة
var getEvent3 = function (e) {
var e = e || window.event ؛
إذا (! ه) {
var c = this.getEvent3.Caller ؛
بينما (ج) {
e = c.arguments [0] ؛
if (e && (event == e.constructor || mouseevent ==
استراحة؛
}
C = c.caller ؛
}
}
var target = e.srcelement؟ E.Srclement: E.Target ،
CurrentN = target.nodename.tolowercase () ،
parentn = target.parentNode.nodename.toLowerCase () ،
Grandn = target.parentNode.ParentNode.Nodename.toLowerCase () ؛
Return [E ، Target ، Currentn ، Parentn ، Grandn] ؛
}
_self.addevent = addEvent ؛
_self.addPropertyChangeEvent = addPropertyChangeEvent ؛
_self.removeEvent = removeEvent ؛
_self.loadevent = loodevent ؛
_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) {
ALERT (eventUtil.getEvent3 (e)) ؛
}) ؛
EventUtil.AddPropertyChangeEvent (وثيقة ، وظيفة (e) {
ALERT (eventUtil.getEvent3 (e)) ؛
}) ؛
}) ؛
</script>
تنقسم معالجة أحداث JavaScript إلى ثلاث مراحل: الفقاعات المعالجة.
خذ النقر فوق الزر كمثال:
مرحلة الالتقاط: من الطبقة الخارجية إلى الطبقة الداخلية ، اتصل أولاً بطريقة مراقبة مرحلة التقاط النقر المسجلة للنافذة ، ثم المستند ، الجسم ، طبقة العقد الأصل حسب الطبقة ، وصولاً إلى الزر نفسه.
مرحلة المعالجة: اتصل بطريقة الاستماع النقر فوق الزر نفسه.
مرحلة الفقاعة: بدءًا من الزر ، من الطبقة الداخلية إلى الطبقة الخارجية ، استدعاء طريقة مراقبة مرحلة الفقاعة للعقد الأصل في كل مستوى بالتسلسل حتى النافذة.
ومع ذلك ، بالنسبة إلى IE8 و IE IE ، لا يتم دعم مرحلة الالتقاط ، لذا فإن الاستماع إلى الحدث في مرحلة الالتقاط ليس شائعًا بعد.
طريقة معالجة الأحداث المعتادة هي:
نسخة الكود كما يلي:
وظيفة EventHandler (E) {
e = e || window.event ؛
var target = e.target || E.Srcelement ؛
... ...
}
E هو كائن حدث. عندما يتم تشغيل الحدث ، يتم تمريره كمعلمة. ومع ذلك ، لا ينطبق على IE8 والإصدارات السفلية من IE. لا يمكن الوصول إليه إلا من خلال متغير الحدث العالمي. لحسن الحظ ، لن يكون هناك موقف حيث تتم معالجة حدثين في نفس الوقت.