javascript 事件處理示例分享
廢話少說,直接奉上示例代碼:
<script type="text/javascript">
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;
}
}
//如果僅僅是阻止事件冒泡
var stopPropagation = function (e) {
e = e || window.event;
if (!+"\v1") {
e.cancelBubble = true;
} else {
e.stopPropagation();
}
}
//取得事件源對象
var getEvent1 = function (e) {
e = e || window.event;
var obj = e.srcElement ? e.srcElement : e.target;
return obj;
}
//取得事件源對象
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = getEvent2.caller;
while (c.caller) {
c = c.caller;
}
return 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)) {
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(document,function(e){
alert(eventUtil.getEvent3(e));
});
});
</script>
javascript事件處理分為三個階段:捕獲 - 處理 - 起泡。
以點擊按鈕為例:
捕獲階段:由外層到內(nèi)層,首先調(diào)用給Window注冊的click捕獲階段監(jiān)聽方法,然后document、body、一層層的父節(jié)點,一直到按鈕本身。
處理階段:調(diào)用按鈕本身的click監(jiān)聽方法。
起泡階段:從按鈕開始,從內(nèi)層到外層,依次調(diào)用各級父節(jié)點的起泡階段監(jiān)聽方法,直到Window。
但是,對于IE8及更低版本IE,不支持捕獲階段,因此捕獲階段的事件監(jiān)聽目前尚不通用。
通常的事件處理方法形式為:
function eventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
... ...
}
e為事件對象,當事件觸發(fā)時,作為參數(shù)傳進來,但對于IE8及更低版本IE不適用,只能通過全局的event變量訪問,好在不會出現(xiàn)同時處理兩個事件的情況。
相關文章
JavaScript省市聯(lián)動實現(xiàn)代碼
這篇文章主要介紹了JavaScript省市聯(lián)動實現(xiàn)代碼,需要的朋友可以參考下2014-02-02
JavaScript前端實現(xiàn)GIF圖片循環(huán)播放
使用 img 加載 GIF 圖片,內(nèi)容只會播放一次,之后就會自動暫停,所以這篇文章為大家介紹了如何使用JavaScript實現(xiàn)GIF圖片循環(huán)播放吧2025-03-03

