中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JavaScript中為事件指定處理程序的五種方式分析

發布時間:2020-09-23 00:55:07 來源:腳本之家 閱讀:152 作者:筱葭 欄目:web開發

本文實例講述了JavaScript中為事件指定處理程序的五種方式。分享給大家供大家參考,具體如下:

JavaScript和HTML之間的交互是通過事件實現的。

IE9、Firefox、Opera、Sarifi、Chrome都已經實現了DOM2級事件模塊的核心部分,IE8是最后一個仍然使用其專有事件系統的主要瀏覽器。

事件流:

事件流描述的是從頁面中接受事件的順序,但IE和Netscape卻提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕獲流。

1) 事件冒泡

事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點接收,然后逐級向上傳播到較為不具體的節點(文檔)。

不支持事件冒泡的事件:blurfocusloadunload

2) 事件捕獲

不太具體的節點應該更早接收到事件,而最具體的節點應該最后接收到事件。事件捕獲的用意在于事件到達預定目標之前捕獲它。

雖然IE9、Safari、Chrome、Firefox、Opera都支持事件捕獲和事件冒泡,但IE8及其更早版本只支持事件冒泡,不支持事件捕獲,因此。建議使用事件冒泡,在有特殊需要的時候再使用事件捕獲。

DOM事件流:

DOM2級事件規定的事件流包括三個階段:事件捕獲階段,處于目標階段和事件冒泡階段。實際上,在事件捕獲階段預定目標不會接收到事件,處于目標階段事件在預定目標上發生。事件處理中,處于目標階段被看成事件冒泡階段的一部分。但是,即使“DOM2級事件”規范明確要求捕獲階段不會涉及事件目標,但IE9、 Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發事件對象上的事件,結果是有兩個機會在目標對象上操作事 件。

IE9、Firefox、Opera、Sarifi、Chrome都支持DOM事件流,IE8及其更早版本不支持DOM事件流。

事件處理程序:

事件就是用戶或瀏覽器自身執行的某種動作,而響應某個事件的函數就是事件處理程序(或事件偵聽器),事件處理程序的名字以“on”開頭。

JavaScript中有五種事件處理程序方式:

1) HTML事件處理程序

每種事件都可以使用一個與相應事件處理程序同名的HTML特性來指定,特性的值可以是能夠執行的JavaScript代碼,也可以是函數。函數中有一個局部變量event,通過event變量可以訪問事件對象;在函數內部,this值等于事件的目標元素。

在HTML中指定事件處理程序的幾個缺點:

① 時差問題:用戶可能在HTML元素一出現在頁面上就觸發相應的事件,但當時的事件處理程序有可能尚不具備執行條件,如用戶在解析事件處理函數之前就觸發事件。為此,很多HTML事件處理程序都會封裝在一個try-catch塊中,以便及時捕獲錯誤,以免錯誤拋出被用戶看到。

② 擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同的結果。不同JavaScript引擎遵循的標識符解析規則略有差異,很有可能會在訪問非限定對象成員時出錯。

③ HTML代碼與JavaScript代碼緊密耦合,更換事件處理程序需要改動HTML代碼與JavaScript代碼。

2) DOM0級事件處理程序

通過JavaScript指定事件處理程序的傳統方式,將一個函數賦值給一個事件處理程序屬性。使用DOM0級方法指定的事件處理程序被認為是元素的方法,因此this引用當前元素。

DOM0級事件處理程序的優勢:

① 簡單;

② 跨瀏覽器

可以通過將事件處理程序的值設置為null來刪除通過DOM0級方法指定的事件處理程序。

3) DOM2級事件處理程序

DOM2級事件定義了兩種方法,用于指定和刪除事件處理程序的操作:addEventListener()removeEventListener(),它們都接收3個參數:要處理的事件名、作為事件處理程序的函數和一個布爾值(true表示在捕獲階段調用事件處理程序,false表示在冒泡階段調用事件處理程序)。

DOM2級事件處理程序的優勢:

可以添加多個事件處理程序,它們會按照添加它們的順序觸發。

通過addEventListener()添加的事件處理程序只能用removeEventListener()來移除,但要求移除時傳入的參數與添加事件處理程序時使用的參數相同,因此通過addEventListener()添加的匿名函數將無法移除,需要給removeEventListener()傳入addEventListener()中命名的函數才能正常移除。

4) IE事件處理程序

IE事件定義了兩個方法:attachEvent()detachEvent(),它們都接收2個參數:要處理的事件名、作為事件處理程序的函數.由于IE8及其更早版本只支持事件冒泡,所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段。

注意:通過IE的attachEvent()添加的事件處理程序的名字以“on”開頭,而通過DOM的addEventListener()添加的名字不是。

在IE中使用attachEvent()與使用DOM0級方法的主要區別:

事件處理程序的作用域不同。在IE中使用attachEvent(),事件處理程序會在全局作用域中運行,因此this等于window;而使用DOM0級方法,事件處理程序會在其所屬元素的作用域中運行。

在IE中使用attachEvent()與使用DOM2級方法的區別:

添加多個事件處理程序的執行順序不同。在IE中使用attachEvent(),可以添加多個事件處理程序,它們會按照添加它們的相反順序觸發;在DOM中使用addEventListener(),可以添加多個事件處理程序,但它們會按照添加它們的順序觸發。

通過attachEvent()添加的事件處理程序只能用detachEvent()來移除,但要求移除時傳入的參數與添加事件處理程序時使用的參數相同,因此通過attachEvent()添加的匿名函數將無法移除,需要給detachEvent()傳入attachEvent()中命名的函數才能正常移除。

5) 跨瀏覽器的事件處理程序

要保證事件處理程序的代碼在大多數瀏覽器下一致地運行,只需關注冒泡階段。

視情況分別使用DOM2級方法、IE方法、DOM0級方法來添加和移除事件,addHandler()removeHandler()方法屬于EventUtil對象。

① 先檢測傳入的元素是否存在DOM2級方法(傳入的第三個參數為false以表示冒泡階段);

② 再檢測傳入的元素是否存在IE的方法;

③ 最后檢測傳入的元素是否存在DOM0級方法(使用方括號語法將屬性名指定為事件處理程序)。

var EventUtil = {
  addHandler:function(element, type, handler) {
    if (element.addEventListener)
      element.addEventListener(type, handler, false);
    else if (element.attachEvent)
      element.attachEvent("on" + type, handler);
    else
      element["on" + type] = handler;
  },
  removeHandler:function(element, type, handler) {
    if (element.removeEventListener)
      element.removeEventListener(type, handler, false);
    else if (element.detachEvent)
      element.detachEvent(“on” + type, handler);
    else
      element["on" + type] = null;
  }
}

PS:關于javascript事件說明可參考本站javascript事件與功能說明大全:http://tools.jb51.net/table/javascript_event

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

简阳市| 荥经县| 奎屯市| 大名县| 马尔康县| 冀州市| 社会| 历史| 宁远县| 灵宝市| 乐清市| 六安市| 东乌珠穆沁旗| 汾阳市| 炉霍县| 溧水县| 玉门市| 鄱阳县| 阆中市| 砀山县| 华宁县| 阿克苏市| 当涂县| 老河口市| 城固县| 奉化市| 太湖县| 济源市| 郑州市| 沙洋县| 诸城市| 那坡县| 襄樊市| 望奎县| 应用必备| 秦安县| 常德市| 宿迁市| 双鸭山市| 临洮县| 大悟县|