首頁 > web前端 > 前端問答 > javascript綁定事件有哪些方式

javascript綁定事件有哪些方式

青灯夜游
發布: 2022-02-16 13:52:08
原創
5769 人瀏覽過

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

javascript綁定事件有哪些方式

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

在Javascript中,綁定事件一共有3種方式:

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

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

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

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

基本語法:

<标签 on事件名="事件处理程序" />
登入後複製

範例:

<input type=’button’ onclick=’display()’ />
登入後複製

範例程式碼:

javascript綁定事件有哪些方式

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

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

#基本語法:

dom对象.on事件名 = 事件处理程序(通常是一个匿名函数)
登入後複製

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

javascript綁定事件有哪些方式

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

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

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

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

事件源.addEventListener(事件名称,事件处理程序,是否捕获);
登入後複製

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

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

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

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获
登入後複製

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板