javascript 事件處理示例分享
廢話少說(shuō),直接奉上示例代碼:
<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();
}
}
//取得事件源對(duì)象
var getEvent1 = function (e) {
e = e || window.event;
var obj = e.srcElement ? e.srcElement : e.target;
return obj;
}
//取得事件源對(duì)象
var getEvent2 = function (e) {
if (window.event) return window.event;
var c = getEvent2.caller;
while (c.caller) {
c = c.caller;
}
return c.arguments[0];
}
//或者這個(gè)功能更強(qiáng)大
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事件處理分為三個(gè)階段:捕獲 - 處理 - 起泡。
以點(diǎn)擊按鈕為例:
捕獲階段:由外層到內(nèi)層,首先調(diào)用給Window注冊(cè)的click捕獲階段監(jiān)聽(tīng)方法,然后document、body、一層層的父節(jié)點(diǎn),一直到按鈕本身。
處理階段:調(diào)用按鈕本身的click監(jiān)聽(tīng)方法。
起泡階段:從按鈕開(kāi)始,從內(nèi)層到外層,依次調(diào)用各級(jí)父節(jié)點(diǎn)的起泡階段監(jiān)聽(tīng)方法,直到Window。
但是,對(duì)于IE8及更低版本IE,不支持捕獲階段,因此捕獲階段的事件監(jiān)聽(tīng)目前尚不通用。
通常的事件處理方法形式為:
function eventHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
... ...
}
e為事件對(duì)象,當(dāng)事件觸發(fā)時(shí),作為參數(shù)傳進(jìn)來(lái),但對(duì)于IE8及更低版本IE不適用,只能通過(guò)全局的event變量訪問(wèn),好在不會(huì)出現(xiàn)同時(shí)處理兩個(gè)事件的情況。
相關(guān)文章
javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文很簡(jiǎn)單,給大家分享了一段使用javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲的代碼,算是對(duì)自己學(xué)習(xí)javascript的一次小小的總結(jié),代碼參考了網(wǎng)友的部分內(nèi)容,推薦給大家,希望對(duì)大家能夠有所幫助。2015-03-03
js使用visibilitychange處理頁(yè)面關(guān)閉事件
本文主要介紹了js使用visibilitychange處理頁(yè)面關(guān)閉事件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件
Bootstrap每天必學(xué)之模態(tài)框(Modal)插件,模態(tài)框(Modal)是覆蓋在父窗體上的子窗體。通常,目的是顯示來(lái)自一個(gè)單獨(dú)的源的內(nèi)容,可以在不離開(kāi)父窗體的情況下有一些互動(dòng)。子窗體可提供信息、交互等,感興趣的小伙伴們可以參考一下2016-04-04
微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片上傳放大預(yù)覽刪除代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無(wú)法正常觸發(fā)校驗(yàn)的解
這篇文章主要介紹了bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無(wú)法正常觸發(fā)校驗(yàn)的解決思路的相關(guān)資料,需要的朋友可以參考下2016-09-09
javascript數(shù)組去重3種方法的性能測(cè)試與比較
面試題中有一題數(shù)組去重,首先想到的是對(duì)象存鍵值的方法可是遇到不同類(lèi)型又能轉(zhuǎn)換成同樣的字符串的就完了接下來(lái)為大家介紹下雙重循環(huán)/存鍵值和類(lèi)型實(shí)現(xiàn)去重,感興趣的各位可以參考下哈2013-03-03

