事件的三種綁定方式

1.行內式綁定事件處理

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

另外一種寫法:

<input  type="button" value="click" style="color:red" onclick="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。