1、事件繫結的幾種方式

在Javascript中，事件繫結一共有3種方式：

① 行內繫結

② 動態繫結

③ 事件監聽

2、行內繫結

基本語法：

<標籤 屬性列表 事件=”事件的處理程式” />

例：

示例程式碼：

以上程式碼就是最典型的行內繫結，雖然可以完成我們需要的功能，但是其把結構+樣式+行為都繫結在同一個標籤中，不利於後期維護。

3、動態繫結

基本語法：

dom物件。事件 = 事件的處理程式（通常是一個匿名函式）

透過動態繫結這種思想改進上題，效果如下圖所示：

4、行內繫結與動態繫結的區別

在Javascript中，有一個特殊物件叫做this，其隨著執行環境的不同，其指向也是不同的！

例1：探究行內繫結中的this指向

執行結果：this。style為空或不是物件，所以由此可以得出一個結論：在行內繫結中其this並不是指向當前正在操作的dom物件，那請問其指向何方呢？

使用除錯工具除錯結果如下：

由此可知：行內繫結中其this指向了全域性window物件！

例2：探究動態繫結中的this指向

執行結果：id為box的div元素背景發生了變化，由此可以得出結論：動態繫結中其this指向了當前正在操作的DOM物件。

綜上所述：

行內繫結中，其事件處理中的this指向了全域性window物件

動態繫結中，其事件處理中的this指向了當前正在操作的dom物件

5、封裝一個自定義函式

在Javascript中，我們操作的大多數都是dom物件，獲取方式都是透過document。的形式，這樣程式碼過於冗餘，所以為了解決這個問題，我們封裝一個自定義函式，專門用於獲取指定id的dom物件。