ไร้สาระน้อยลงเพียงแค่ให้รหัสตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น eventutil () {
var _self = this;
/// เพิ่มเหตุการณ์
var addevent = (function () {
if (document.addeventListener) {
ฟังก์ชั่น return (el, type, fn) {
El.addeventListener (ประเภท, fn, false);
-
} อื่น {
ฟังก์ชั่น return (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 ("อินพุต", fn, false);
-
-
// ลบเหตุการณ์
var remverevent = 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 loadEvent = 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.Sreclement: 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;
ถ้า (! e) {
var c = this.getEvent3.Caller;
ในขณะที่ (c) {
e = c.Arguments [0];
if (e && (event == e.constructor || mouseEvent == e.constructor)) {
หยุดพัก;
-
C = C.Caller;
-
-
var target = e.srcelement? E.Sreclement: 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 = removeVent;
_self.loadEvent = loadEvent;
_self.stopevent = stopEvent;
_Self.StopPropagation = stopPropagation;
_self.getEvent1 = getEvent1;
_self.getEvent2 = getEvent2;
_self.getEvent3 = getEvent3;
-
var eventutil = ใหม่ eventutil ();
Eventutil.LoadEvent (function () {
eventutil.addevent (เอกสาร, "คลิก", ฟังก์ชั่น (e) {
การแจ้งเตือน (Eventutil.GetEvent3 (e));
-
Eventutil.addPropertyChangeEvent (เอกสาร, ฟังก์ชั่น (e) {
การแจ้งเตือน (Eventutil.GetEvent3 (e));
-
-
</script>
การประมวลผลเหตุการณ์ JavaScript แบ่งออกเป็นสามขั้นตอน: การจับภาพการประมวลผล
คลิกปุ่มเป็นตัวอย่าง:
การจับภาพขั้นตอน: จากเลเยอร์ด้านนอกไปยังเลเยอร์ด้านในก่อนโทรไปที่การคลิกการจับภาพขั้นตอนการตรวจสอบขั้นตอนการคลิกที่ลงทะเบียนสำหรับหน้าต่างจากนั้นเอกสาร, ร่างกาย, ร่างกาย, เลเยอร์โหนดหลักโดยเลเยอร์ตลอดทางจนถึงปุ่มเอง
ขั้นตอนการประมวลผล: เรียกวิธีการคลิกการฟังของปุ่มเอง
Bubble Stage: เริ่มต้นจากปุ่มจากชั้นด้านในไปยังชั้นนอกให้เรียกใช้วิธีการตรวจสอบขั้นตอนฟองของโหนดหลักในแต่ละระดับตามลำดับจนถึงหน้าต่าง
อย่างไรก็ตามสำหรับ IE8 และ IE ต่ำกว่าขั้นตอนการจับไม่ได้รับการสนับสนุนดังนั้นการฟังเหตุการณ์ในขั้นตอนการจับยังไม่ธรรมดา
วิธีการจัดการเหตุการณ์ปกติคือ:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น EventHandler (e) {
E = E || window.event;
var target = e.target || E.Srelement;
-
-
E เป็นวัตถุเหตุการณ์ เมื่อเหตุการณ์ถูกทริกเกอร์มันจะถูกส่งผ่านเป็นพารามิเตอร์ อย่างไรก็ตามมันไม่สามารถใช้ได้กับ IE8 และ IE เวอร์ชันที่ต่ำกว่า สามารถเข้าถึงได้ผ่านตัวแปรเหตุการณ์ทั่วโลกเท่านั้น โชคดีที่จะไม่มีสถานการณ์ที่มีการประมวลผลเหตุการณ์สองเหตุการณ์ในเวลาเดียวกัน