addEventListener()和attachEvent的區別

看到這2種事件綁定方法,研究下

attachEvent

attachEvent(eventfunction,):IE提出的標準html

瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。只支持IEchrome

方法 IE
attachEvent()  

語法 

event

必須。字符串,指定事件名。
注意: 使用 "on" 前綴。 例如,使用 "onclick" ,而不是使用 "click"。 
支持綁定多個事件,綁定的先執行。瀏覽器

取消綁定事件:detachEvent()
提示: 全部 HTML DOM 事件,能夠查看咱們完整的 Microsoft官方文檔dom

function 必須。指定要事件觸發時執行的函數。 

當事件對象會做爲第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如, "onclick" 事件屬於 MouseEvent(鼠標事件) 對象。

範例

document.getElementById("myBtn").attachEvent("onclick", myFunction)
//官方的example已經移除,並推薦使用addEventListener

addEventListener

addEventListener(eventfunction, boolean):W3C提出的標準,創建在DOM Level 2 Events基礎上函數

瀏覽器支持

表格中的數字表示支持該方法的第一個瀏覽器的版本號。spa

方法 chrome IE firefox sifari Opera
addEventListener() 1.0 9.0 1.0 1.0 7.0

語法 

event

必須。字符串,指定事件名。
注意: 不要使用 "on" 前綴。 例如,使用 "click" ,而不是使用 "onclick"。 
支持綁定多個事件,綁定的先執行。firefox

取消綁定事件:removeEventListener
提示: 全部 HTML DOM 事件,能夠查看咱們完整的 HTML DOM Event 對象參考手冊code

function 必須。指定要事件觸發時執行的函數。 

當事件對象會做爲第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如, "click" 事件屬於 MouseEvent(鼠標事件) 對象。
useCapture 可選。布爾值,指定事件是否在捕獲或冒泡階段執行。

可能值:
  • true - 事件句柄在捕獲階段執行
  • false- false- 默認。事件句柄在冒泡階段執行

範例

document.getElementById("myBtn").addEventListener("click", myFunction)
相關文章
相關標籤/搜索