JS三個事件綁定方法

1. JS三個事件綁定方法

1.1. 使用html進行事件綁定

1.直接在html標簽上寫入事件類型和事件處理方法。

<button onclick = "alert('hello world')">click me!</button>

2.在html標簽上寫入事件類型，在js上寫事件處理方法。

• html部分

<button onclick = "sayHello()">click me!</button>

• js部分

function sayHello(){
  alert('hello world!!!')
}

1.2. 使用JS獲取dom對象進行事件綁定

為了讓代碼更加整潔以及便於維護，使html代碼與js代碼解耦。

• html部分

<button id="btn">click me!</button>

• js部分
  注意在調用事件方法時，不要加上括號，否則會立即調用，之后點擊按鈕就沒反應了。

document.querySelector('#btn').onclick = sayHello

function sayHello() {
  alert('hello world')
}

1.3. 使用addEventListener()綁定事件

使用上面兩種方法，只能綁定一個事件，如果要綁定多個事件，可以使用addEventListener()添加事件監聽器，一般情況下傳入兩個參數，第一個參數是事件類型，第二個參數是事件處理方法。

• html部分

<button id="btn">click me!</button>

• js部分
  注意在寫入事件類型時，不要加上on

document.querySelector('#btn').addEventListener('click',sayHello)
document.querySelector('#btn').addEventListener('click',sayHi)

function sayHello() {
  alert('hello world!')
}
function sayHi () {
  alert('hi!')
}

小結：

• 使用JS獲取dom對象進行事件綁定時，事件處理方法加上括號會立即調用。
• 一個html元素要綁定多個事件時，使用addEventListener()。