js 註冊事件的兩種方式詳解，傳統註冊事件與方法監聽註冊事件（addEventListener）

在這裡，我對js註冊事件的兩種方式做一個詳解，他們分別是傳統的註冊事件和方法監聽註冊事件，下面來做一個詳細的比較

 

傳統註冊事件：

利用on開頭的事件 如onclick

特點：註冊事件的唯一性，同一個元素只能設定一個處理函式最後註冊的處理函式將會覆蓋前面註冊的所有處理函式

 

方法監聽事件註冊方式 ：

addEventListener() 是一個方法

特點：同一個元素，同一個事件可以註冊多個監聽器 ，多個事件處理程式

用法 addEventListener（type,listener[useCapture])
​​​​​​​引數

type:需要監聽的事件型別，如click, mouseover, 注意這裡是不需要加 on

listener：事件處理函式，事件發生時，會呼叫的函式

useCapture：可選引數，布林值，預設為false

 

下面我們來體驗一下吧

先做兩個按鈕

<button>傳統註冊事件</button>
<button>方法監聽註冊事件</button>

js程式碼

   const btn = document.querySelectorAll('button')
    //傳統註冊事件
    btn[0].onclick = function () {
        alert('這是傳統的註冊事件方法')
    }

    //方法監聽註冊方法
    btn[1].addEventListener('click',function () {
        alert('這是方法監聽註冊事件方法')
    })
    btn[1].addEventListener('click',function () {
        alert('這是方法監聽註冊事件方法，第二個事件監聽')
    })