javascript綁定事件有哪些方式

綁定事件的方式：1、使用「」語句綁定；2、使用「dom物件.on事件名稱= 事件處理程式」語句綁定；3、使用「事件來源.addEventListener(事件名,事件處理程序,是否捕獲)」語句綁定。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在Javascript中，綁定事件一共有3種方式：

• #使用HTML標籤的事件屬性綁定處理程序

• 使用事件來源的事件屬性綁定處理程序

• 使用addEventListener()綁定處理程序

1、使用HTML標籤的事件屬性綁定處理程序

基本語法：

<标签 on事件名="事件处理程序" />

範例：

<input type=’button’ onclick=’display()’ />

範例程式碼：

以上程式碼就是最典型的行內綁定，雖然可以完成我們需要的功能，但是其把結構樣式行為都綁定在同一個標籤中，不利於後期維護。

2、使用事件來源的事件屬性綁定處理程序

#基本語法：

dom对象.on事件名 = 事件处理程序（通常是一个匿名函数）

透過動態綁定這個想法改進上題，效果如下圖所示：

#3、使用addEventListener()綁定處理程序

#使用事件來源物件的事件屬性綁定事件處理程序方式雖然簡單，但其存在一個不足之處：一個事件只能綁定一個處理程序，後面綁定的事件處理函數會覆蓋前面綁定的事件處理函數。實際應用中，一個事件來源的一個事件可能會用到多個函數來處理。

當一個事件來源需要使用多個函數來處理時，可以透過事件來源呼叫 addEventListener()（針對標準瀏覽器）來綁定事件處理函數以實現此需求。一個事件來源透過方法綁定多個事件函數的實作方式是：對事件來源物件呼叫多次 addEventListener()，其中每次的呼叫只綁定一個事件處理函數。

addEventListener() 是標準事件模型中的一個方法，對所有標準瀏覽器都有效。使用addEvent Liste ner() 綁定事件處理程序的格式如下：

事件源.addEventListener(事件名称,事件处理程序,是否捕获);

參數「事件名稱」是一個不帶「on」的事件名稱；參數「是否捕獲」是一個布林值，預設值為false，取false 時實作事件冒泡，取true 時實作事件擷取。

透過多次呼叫 addEventListener() 可以為一個事件來源物件的同一個事件類型綁定多個事件處理函數。當物件發生事件時，所有該事件綁定的事件處理函數就會按照綁定的順序依序呼叫執行。另外，需要注意的是，addEventListener() 綁定的事件處理函數中的 this 指向事件來源。

addEventListener() 綁定處理程序範例：

document.addEventListener('click',fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener('click',fn2,true);//click事件绑定fn2函数实现事件捕获

【相關推薦：javascript學習教學##】

以上是javascript綁定事件有哪些方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！