javascript的事件觸發(fā)器介紹的實(shí)現(xiàn)
事件觸發(fā)器從字面意思上可以很好的理解,就是用來(lái)觸發(fā)事件的,但是有些沒(méi)有用過(guò)的朋友可能就會(huì)迷惑了,事件不是通常都由用戶在頁(yè)面上的實(shí)際操作來(lái)觸發(fā)的嗎?這個(gè)觀點(diǎn)不完全正確,因?yàn)橛行┦录仨氂沙绦騺?lái)實(shí)現(xiàn),如自定義事件,jQuery的ajax框架的一些自定義事件就必須由事件觸發(fā)器來(lái)實(shí)現(xiàn)。當(dāng)然,在一些特殊情況下,用事件觸發(fā)器來(lái)觸發(fā)事件比用戶的實(shí)際操作來(lái)觸發(fā)事件更方便。
對(duì)于實(shí)現(xiàn)事件觸發(fā)器,瀏覽器都有原生的方法來(lái)支持,但是在兼容性上又有很大的出入,這種兼容性的問(wèn)題完全在意料之中,IE有自己的方法,其他標(biāo)準(zhǔn)瀏覽器也有一套方法,不說(shuō)誰(shuí)的方法好與不好,對(duì)于WEB開(kāi)發(fā)者來(lái)說(shuō)搞出幾套方法就是對(duì)開(kāi)發(fā)人員的一種折磨。IE支持fireEvent方法來(lái)實(shí)現(xiàn)事件觸發(fā),標(biāo)準(zhǔn)瀏覽器支持dispatchEvent來(lái)實(shí)現(xiàn)事件觸發(fā),兩面派的IE9是兩者都支持。下面是出自prototype.js的源碼(其實(shí)我是從司徒正美的博客復(fù)制過(guò)來(lái)的):
var fireEvent = function(element,event){
if (document.createEventObject){
// IE瀏覽器支持fireEvent方法
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// 其他標(biāo)準(zhǔn)瀏覽器使用dispatchEvent方法
var evt = document.createEvent( 'HTMLEvents' );
// initEvent接受3個(gè)參數(shù):
// 事件類型,是否冒泡,是否阻止瀏覽器的默認(rèn)行為
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};
上面的方法可以兼容主流的瀏覽器以實(shí)現(xiàn)事件觸發(fā)器的功能。但是對(duì)于一些封裝好的事件處理系統(tǒng),如jQuery的event模塊,就沒(méi)這么簡(jiǎn)單了,只能通過(guò)模擬來(lái)實(shí)現(xiàn)了。我在之前寫(xiě)過(guò)一個(gè)很簡(jiǎn)單的事件處理系統(tǒng),最近又碰到自定義事件的需求,于是在之前的事件系統(tǒng)的基礎(chǔ)上模擬了一個(gè)事件觸發(fā)器,代碼如下:
/**
* 事件觸發(fā)器
* @param { Object } DOM元素
* @param { String / Object } 事件類型 / event對(duì)象
* @param { Array } 傳遞給事件處理函數(shù)的附加參數(shù)
* @param { Boolean } 是否冒泡
*/
trigger : function( elem, event, data, isStopPropagation ){
var type = event.type || event,
// 冒泡的父元素,一直到document、window
parent = elem.parentNode ||
elem.ownerDocument ||
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, type + 'Handler' );
isStopPropagation = typeof data === 'boolean' ?
data : (isStopPropagation || false);
data = data && isArray( data ) ? data : [];
// 創(chuàng)建自定義的event對(duì)象
event = typeof event === 'object' ?
event : {
type : type,
preventDefault : noop,
stopPropagation : function(){
isStopPropagation = true;
}
};
event.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// 遞歸調(diào)用自身來(lái)模擬冒泡
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}
模擬的原理并不難,給某元素綁定一個(gè)事件處理函數(shù),如果有觸發(fā)事件的實(shí)際操作就會(huì)執(zhí)行相應(yīng)的事件處理函數(shù),所以要達(dá)到事件觸發(fā)器的功能只要獲取到相應(yīng)的事件處理函數(shù)然后執(zhí)行就差不多了,這是最基本的。
在實(shí)際的事件發(fā)生時(shí)瀏覽器會(huì)生成一個(gè)event對(duì)象,里面包含了一些事件發(fā)生時(shí)的屬性和信息。如果沒(méi)有實(shí)際的事件發(fā)生是沒(méi)有這個(gè)event對(duì)象的,所以上面的代碼也創(chuàng)建了一個(gè)event對(duì)象滿足最基本的功能。
還有事件冒泡,如果沒(méi)有實(shí)際的事件發(fā)生,自然也不會(huì)有冒泡的行為,那么如果要模擬冒泡的功能,就必須不斷的查找父元素并檢查是否綁定了相同類型的事件,直至到document和window為止,如果結(jié)構(gòu)復(fù)雜,這種遞歸調(diào)用的方法性能估計(jì)會(huì)不怎么樣。
最后是瀏覽器的默認(rèn)行為,我覺(jué)得這個(gè)要去模擬相當(dāng)麻煩,麻煩到不知如何去實(shí)現(xiàn),比如a標(biāo)簽?zāi)J(rèn)的跳轉(zhuǎn),我測(cè)試了jQuery的trigger,也沒(méi)有實(shí)現(xiàn),但是一些其他的行為貌似又在API手冊(cè)中有介紹。畢竟這個(gè)功能不是很重要,暫時(shí)也沒(méi)做過(guò)多的深究。
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- js活用事件觸發(fā)對(duì)象動(dòng)作
- javascript下對(duì)于事件、事件流、事件觸發(fā)的順序隨便說(shuō)說(shuō)
- javascript 不讓鼠標(biāo)事件觸發(fā)
- js實(shí)現(xiàn)瀏覽器窗口大小被改變時(shí)觸發(fā)事件的方法
- js 觸發(fā)select onchange事件代碼
- js觸發(fā)onchange事件的方法說(shuō)明
- js獲取事件源及觸發(fā)該事件的對(duì)象
- 代碼觸發(fā)js事件(click、change)示例應(yīng)用
- js事件觸發(fā)操作實(shí)例分析
相關(guān)文章
JS實(shí)現(xiàn)的最簡(jiǎn)Table選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)的最簡(jiǎn)Table選項(xiàng)卡效果,涉及簡(jiǎn)單的JavaScript響應(yīng)鼠標(biāo)事件切換樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10javascript與PHP動(dòng)態(tài)往類中添加方法對(duì)比
這篇文章主要介紹了JAVASCRIPT與PHP動(dòng)態(tài)往類中添加方法對(duì)比的相關(guān)資料,需要的朋友可以參考下2018-03-037個(gè)你應(yīng)該知道的JS原生錯(cuò)誤類型
這篇文章主要介紹了7個(gè)你應(yīng)該知道的JS原生錯(cuò)誤類型,對(duì)此感興趣的同學(xué),可以參考一下2021-04-04微信小程序--onShareAppMessage分享參數(shù)用處(頁(yè)面分享)
本篇文章主要介紹了微信小程序的頁(yè)面分享onShareAppMessage分享參數(shù)用處的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JavaScript移動(dòng)端常用事件之touch觸摸事件詳解
觸屏事件touch也稱為觸摸事件,touch對(duì)象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對(duì)屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下2022-10-10微信小程序如何使用Promise對(duì)wx.request()封裝詳解(附完整代碼)
微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫(kù)傳輸模式,數(shù)據(jù)傳輸簡(jiǎn)單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對(duì)wx.request()封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03