Kurang omong kosong, cukup berikan kode contoh:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
function eventutil () {
var _self = ini;
/// Tambahkan acara
var addevent = (function () {
if (document.addeventListener) {
fungsi pengembalian (el, type, fn) {
el.addeventlistener (tipe, fn, false);
}
} kalau tidak {
fungsi pengembalian (el, type, fn) {
el.attachevent ("on" + type, function () {
return fn.call (el, window.event);
});
}
}
}) ();
/// Tambahkan atribut untuk mengubah acara
var addPropertyChangeEvent = function (obj, fn) {
if (window.activexObject) {
obj.onpropertychange = fn;
} kalau tidak {
obj.addeventListener ("input", fn, false);
}
}
// Hapus acara
var remestEvent = function (obj, type, fn) {
if (obj.removeeventListener) {
obj.removeeventlistener (tipe, fn, false);
} lain jika (obj.detachevent) {
obj.detachevent ("on" + type, obj ["on" + type + fn]);
obj ["on" + type + fn] = null;
}
}
// acara pemuatan
var loadEvent = function (fn) {
var oldonload = window.onload;
if (typeof oldonload! = "function") {
window.onload = fn;
} kalau tidak {
window.onload = function () {
oldonload ();
fn ();
}
}
}
// Blokir acara
var stopEvent = function (e) {
E = E || window.event;
if (e.preventdefault) {
e.preventdefault ();
e.Stoppropagation ();
} kalau tidak {
E.ReturnValue = false;
e.cancelbubble = true;
}
}
// Jika itu hanya untuk mencegah acara menjadi menggelegak
var stoppropagation = function (e) {
E = E || window.event;
if (!+"/v1") {
e.cancelbubble = true;
} kalau tidak {
e.Stoppropagation ();
}
}
// Dapatkan objek sumber acara
var getEvent1 = function (e) {
E = E || window.event;
var obj = e.srcelement? E.Srcelement: E.Target;
kembalikan obj;
}
// Dapatkan objek sumber acara
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = getEvent2.caller;
while (c.caller) {
c = c.caller;
}
mengembalikan c.arguments [0];
}
// atau fungsi ini lebih kuat
var getEvent3 = function (e) {
var e = e || window.event;
if (! e) {
var c = this.getEvent3.caller;
while (c) {
E = C.Argumen [0];
if (e && (event == E.Constructor || mouseEvent == E.Constructor)) {
merusak;
}
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 ();
return [e, target, currentn, parentn, grandn];
}
_Self.addevent = addEvent;
_Self.addPropertyChangeEvent = addPropertyChangeEvent;
_Self.removeEvent = RemestEvent;
_Self.LoadEvent = LoadEvent;
_Self.stopevent = stopEvent;
_Self.StopPropagation = stoppropagation;
_Self.getEvent1 = getEvent1;
_Self.getEvent2 = getEvent2;
_Self.getEvent3 = getEvent3;
}
var eventutil = eventutil baru ();
Eventutil.LoadEvent (function () {
eventutil.addevent (dokumen, "klik", fungsi (e) {
peringatan (eventutil.getEvent3 (e));
});
Eventutil.AddPropertyChangeEvent (dokumen, fungsi (e) {
peringatan (eventutil.getEvent3 (e));
});
});
</script>
Pemrosesan acara JavaScript dibagi menjadi tiga tahap: gelembung pemrosesan-pemrosesan.
Ambil mengklik tombol sebagai contoh:
Tahap Capture: Dari lapisan luar ke lapisan dalam, pertama panggil metode pemantauan tahap tangkapan klik yang terdaftar untuk jendela, lalu dokumentasikan, bodi, node induk lapisan demi lapisan, sampai ke tombol itu sendiri.
Fase Pemrosesan: Panggil metode mendengarkan klik tombol itu sendiri.
Bubble Stage: Mulai dari tombol, dari lapisan dalam ke lapisan luar, panggil metode pemantauan panggung gelembung dari node induk di setiap level secara berurutan sampai jendela.
Namun, untuk IE8 dan IE yang lebih rendah, fase penangkapan tidak didukung, jadi mendengarkan peristiwa dalam fase penangkapan belum umum.
Metode penanganan acara yang biasa adalah:
Salinan kode adalah sebagai berikut:
Function EventHandler (e) {
E = E || window.event;
var target = e.target || E.Srcelement;
... ...
}
E adalah objek acara. Ketika acara dipicu, itu dilewatkan sebagai parameter. Namun, itu tidak berlaku untuk IE8 dan versi IE yang lebih rendah. Ini hanya dapat diakses melalui variabel acara global. Untungnya, tidak akan ada situasi di mana dua peristiwa diproses pada saat yang sama.