javascript綁定事件的方式有哪些

這篇文章主要為大家展示了“javascript綁定事件的方式有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“javascript綁定事件的方式有哪些”這篇文章吧。

綁定事件的方式：1、使用“<標簽 on事件名="事件的處理程序" />”語句綁定；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綁定事件的方式有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！