JavaScript event handling example sharing_javascript skills-JS Tutorial-php.cn

Stop talking nonsense and just provide the sample code:

Copy code The code is as follows: function EventUtil() { var _self = this; ///添加事件 var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); } } else { return function (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; } else { obj.addEventListener("input", fn, false); } } //移除事件 var removeEvent = function (obj, type, fn) { if (obj.removeEventListener) { obj.removeEventListener(type, 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 (typeof oldonload != "function") { window.onload = fn; } else { window.onload = function () { oldonload(); fn(); } } } //阻止事件 var stopEvent = function (e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); e.stopPropagation(); } else { e.returnValue = false; e.cancelBubble = true; } } //If you just want to prevent events from bubbling var stopPropagation = function (e) { e = e || window.event; if (! "v1") { e.cancelBubble = true; } else { e.stopPropagation(); } } //Get the event source object var getEvent1 = function (e) { e = e || window.event; var obj = e.srcElement ? e.srcElement : e.target; return obj; } //Get the event source object var getEvent2 = function (e) { If (window.event) return window.event; var c = getEvent2.caller; while (c.caller) { c = c.caller; } return c.arguments[0]; } //Or this function is more powerful 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)) { break; } 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 = removeEvent; _self.loadEvent = 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(document, "click", function (e) { Alert(eventUtil.getEvent3(e)); }); eventUtil.addPropertyChangeEvent(文檔,函數(e){ Alert(eventUtil.getEvent3(e)); }); }); >腳本

javascript事件處理分為三個階段：捕獲 - 處理 - 起泡。

以點擊按鈕為例： 捕獲階段：由外層到內層，首先呼叫給Window註冊的點擊捕獲階段監聽方法，document、body、層的父節點，一直到按鈕本身。 處理階段：呼叫按鈕本身的click監聽方法。

起泡階段：從按鈕開始，從內層到外層，依序呼叫父節點的起泡階段監聽方法，直到視窗。 但是，對於IE8及後續版本IE，不支援捕獲階段，捕獲階段的事件監聽目前尚不通用。

通常的事件處理方法形式為：

複製程式碼

程式碼如下： 函數 eventHandler(e) { e = e ||視窗.事件; var 目標 = e.target || e.srcElement; ... ... }

e為事件對象，當事件觸發時，作為參數確定，但對於IE8及優先版本IE不適用，只能透過全域的事件變數訪問，好在不會出現同時處理兩個事件的情況。 🎜>