事件的三種繫結方式

1.行內式繫結事件處理

functionclickme()

缺點:

1.html與js**的耦合性高

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

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

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

優點：

1.使用簡單，粗暴

2.跨瀏覽器

缺點:

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

var btn = document.getelementbyid("mybtn");

btn.onclick = function()

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

事件觸發階段:冒泡階段

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

這裡用的就是我們常用的addevenlistener(),removeevenlistener()

優點:1.可定義多個事件，並依次執行。

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

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

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

**自：

1.行內式繫結事件處理

functionclickme()

缺點:

1.html與js**的耦合性高

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

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

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

優點：

1.使用簡單，粗暴

2.跨瀏覽器

缺點:

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

var btn = document.getelementbyid("mybtn");

btn.onclick = function()

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

事件觸發階段:冒泡階段

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

這裡用的就是我們常用的addevenlistener(),removeevenlistener()

優點:1.可定義多個事件，並依次執行。

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

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

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

**自：

JS事件繫結三種方式

1.在html標籤中直接繫結 2.在js中獲取到相應的dom元素後繫結 重複繫結會覆蓋之前繫結的onclick事件let button1 document.getelementbyid btn1 button1.onclick function 3.在js中使用addeventlistener 實現...

JS繫結事件的三種方式

一.xhtml 繫結方式 type button onclick test type button onclick 若干句js 二.dom繫結方式 推薦 優點 內容和行為分離 dom物件.事件 事件處理函式 var btn1 document.getelementbyid btn1 btn1.onc...

DOM繫結事件的三種方式

參考事件繫結原理 1.在dom中繫結。在dom中繫結有兩種方式 function handlename 2.在js中繫結。elementobj.on function elementobj.nclick function 3.利用事件監聽，但是事件監聽要考慮到瀏覽器相容性 chrome firefo...