綁定事件的方式: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中文網其他相關文章!