1.行內式綁定事件處理

---

<input type="button" value="click" style="color:red" οnclick="console.log(this.style.color)"/>

?

另外一種寫法:

<input type="button" value="click" style="color:red" οnclick="clickMe()"/>function clickMe(){//event 這是默認存在的事件對象 }

?

這時候,這個函數的作用于這就這個對象本身(input),所以我們可以通過this獲取input的任何屬性。

?

缺點:

1.html與js代碼的耦合性高

2.在事件函數未預編譯之前，點擊可能會報錯

3.這樣的事件處理程序在不同瀏覽器中的作用于鏈有差別

?

2.dom0級式定義事件處理程序

---

優點：

1.使用簡單，粗暴

2.跨瀏覽器

?

缺點:

1.每個元素只能定義一個click事件，因為是屬性式的，后面的定義會覆蓋前面的定義

var btn = document.getElementById("mybtn");btn.onclick = function(){alert(this.id)}

?

仔細查看btn對象的話，會發現里面很多事件屬性,onclick,onmouseover...

所以這種又被稱為元素的方法，這里的作用域值得是元素btn。

事件觸發階段:冒泡階段

?

3.dom3級式定義事件處理程序

---

這里用的就是我們常用的addEvenListener(),removeEvenListener()

?優點:

1.可定義多個事件，并依次執行。

一般都是將事件添加到事件流的冒泡階段，以便兼容更多瀏覽器。

dom0定義的事件會在其所屬的作用域中運行，dom0中的this指向當前對象。

dom2定義的事件會在全局作用域(window)中運行,this==window。

?

?

總結

以上是生活随笔為你收集整理的事件的三种绑定方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。