欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript的事件觸發(fā)器介紹的實現(xiàn)

 更新時間:2014年06月05日 11:53:58   作者:  
這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實現(xiàn),本文所指觸發(fā)器是用程序來觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下

事件觸發(fā)器從字面意思上可以很好的理解,就是用來觸發(fā)事件的,但是有些沒有用過的朋友可能就會迷惑了,事件不是通常都由用戶在頁面上的實際操作來觸發(fā)的嗎?這個觀點不完全正確,因為有些事件必須由程序來實現(xiàn),如自定義事件,jQuery的ajax框架的一些自定義事件就必須由事件觸發(fā)器來實現(xiàn)。當然,在一些特殊情況下,用事件觸發(fā)器來觸發(fā)事件比用戶的實際操作來觸發(fā)事件更方便。

對于實現(xiàn)事件觸發(fā)器,瀏覽器都有原生的方法來支持,但是在兼容性上又有很大的出入,這種兼容性的問題完全在意料之中,IE有自己的方法,其他標準瀏覽器也有一套方法,不說誰的方法好與不好,對于WEB開發(fā)者來說搞出幾套方法就是對開發(fā)人員的一種折磨。IE支持fireEvent方法來實現(xiàn)事件觸發(fā),標準瀏覽器支持dispatchEvent來實現(xiàn)事件觸發(fā),兩面派的IE9是兩者都支持。下面是出自prototype.js的源碼(其實我是從司徒正美的博客復(fù)制過來的):

復(fù)制代碼 代碼如下:

var fireEvent = function(element,event){
 if (document.createEventObject){
  // IE瀏覽器支持fireEvent方法
  var evt = document.createEventObject();
  return element.fireEvent('on'+event,evt)
 }
 else{
  // 其他標準瀏覽器使用dispatchEvent方法
  var evt = document.createEvent( 'HTMLEvents' );
  // initEvent接受3個參數(shù):
  // 事件類型,是否冒泡,是否阻止瀏覽器的默認行為
  evt.initEvent(event, true, true); 
  return !element.dispatchEvent(evt);
 }
};

上面的方法可以兼容主流的瀏覽器以實現(xiàn)事件觸發(fā)器的功能。但是對于一些封裝好的事件處理系統(tǒng),如jQuery的event模塊,就沒這么簡單了,只能通過模擬來實現(xiàn)了。我在之前寫過一個很簡單的事件處理系統(tǒng),最近又碰到自定義事件的需求,于是在之前的事件系統(tǒng)的基礎(chǔ)上模擬了一個事件觸發(fā)器,代碼如下:

復(fù)制代碼 代碼如下:

/**
 * 事件觸發(fā)器
 * @param { Object } DOM元素
 * @param { String / Object } 事件類型 / event對象
 * @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對象  
 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)用自身來模擬冒泡
 if( parent && !isStopPropagation ){
  data.shift();
  this.trigger( parent, event, data );
 }
}


模擬的原理并不難,給某元素綁定一個事件處理函數(shù),如果有觸發(fā)事件的實際操作就會執(zhí)行相應(yīng)的事件處理函數(shù),所以要達到事件觸發(fā)器的功能只要獲取到相應(yīng)的事件處理函數(shù)然后執(zhí)行就差不多了,這是最基本的。

在實際的事件發(fā)生時瀏覽器會生成一個event對象,里面包含了一些事件發(fā)生時的屬性和信息。如果沒有實際的事件發(fā)生是沒有這個event對象的,所以上面的代碼也創(chuàng)建了一個event對象滿足最基本的功能。

還有事件冒泡,如果沒有實際的事件發(fā)生,自然也不會有冒泡的行為,那么如果要模擬冒泡的功能,就必須不斷的查找父元素并檢查是否綁定了相同類型的事件,直至到document和window為止,如果結(jié)構(gòu)復(fù)雜,這種遞歸調(diào)用的方法性能估計會不怎么樣。

最后是瀏覽器的默認行為,我覺得這個要去模擬相當麻煩,麻煩到不知如何去實現(xiàn),比如a標簽?zāi)J的跳轉(zhuǎn),我測試了jQuery的trigger,也沒有實現(xiàn),但是一些其他的行為貌似又在API手冊中有介紹。畢竟這個功能不是很重要,暫時也沒做過多的深究。

 

 

相關(guān)文章

  • JS實現(xiàn)的最簡Table選項卡效果

    JS實現(xiàn)的最簡Table選項卡效果

    這篇文章主要介紹了JS實現(xiàn)的最簡Table選項卡效果,涉及簡單的JavaScript響應(yīng)鼠標事件切換樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-10-10
  • js 數(shù)據(jù)類型判斷的方法

    js 數(shù)據(jù)類型判斷的方法

    這篇文章主要介紹了js 數(shù)據(jù)類型判斷的方法,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2020-12-12
  • javascript與PHP動態(tài)往類中添加方法對比

    javascript與PHP動態(tài)往類中添加方法對比

    這篇文章主要介紹了JAVASCRIPT與PHP動態(tài)往類中添加方法對比的相關(guān)資料,需要的朋友可以參考下
    2018-03-03
  • 7個你應(yīng)該知道的JS原生錯誤類型

    7個你應(yīng)該知道的JS原生錯誤類型

    這篇文章主要介紹了7個你應(yīng)該知道的JS原生錯誤類型,對此感興趣的同學(xué),可以參考一下
    2021-04-04
  • javascript閉包的使用之按鈕切換功能

    javascript閉包的使用之按鈕切換功能

    閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù).這篇文章通過實例代碼給大家介紹了javascript閉包的使用之按鈕切換功能,感興趣的朋友一起看看吧
    2018-08-08
  • 微信小程序--onShareAppMessage分享參數(shù)用處(頁面分享)

    微信小程序--onShareAppMessage分享參數(shù)用處(頁面分享)

    本篇文章主要介紹了微信小程序的頁面分享onShareAppMessage分享參數(shù)用處的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • 微信JSAPI支付操作需要注意的細節(jié)

    微信JSAPI支付操作需要注意的細節(jié)

    這篇文章主要介紹了微信JSAPI支付中所遇到的那些坑,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • 通過大白話理解微信小程序獲取授權(quán)

    通過大白話理解微信小程序獲取授權(quán)

    最近由于公司需要研究了一下微信小程序的開發(fā),特此記錄一下小程序獲取授權(quán)的流程,便于自己理解,下面這篇文章主要給大家介紹了關(guān)于如何通過大白話理解微信小程序獲取授權(quán)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • JavaScript移動端常用事件之touch觸摸事件詳解

    JavaScript移動端常用事件之touch觸摸事件詳解

    觸屏事件touch也稱為觸摸事件,touch對象代表一個觸摸點,觸摸點可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • 微信小程序如何使用Promise對wx.request()封裝詳解(附完整代碼)

    微信小程序如何使用Promise對wx.request()封裝詳解(附完整代碼)

    微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫傳輸模式,數(shù)據(jù)傳輸簡單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對wx.request()封裝的相關(guān)資料,需要的朋友可以參考下
    2023-03-03

最新評論