js事件監聽的幾種方式

js做爲事件驅動的語言，那對事件的監聽必不可少，那麼在前端瀏覽器中有幾種事件監聽的方式呢。

1.html內聯屬性

<button type="button" onclick="alert('hello'')"></button>

該方式的缺點就是和html耦合高，儘可能少使用

2.dom屬性綁定

<div class="title"> hello </div>

var obj = document.getElementByClassName('title');
obj[n].onclick = function() {
    alert('hello');
}

該方式的缺點是隻能綁定一個回調函數，若是想要綁定多個則沒法實現，必須經過下面的註冊事件監聽函數的方式

3.使用事件監聽函數

<div class="title"> hello </div>

var obj = document.getElementByClassName('title');
obj[n].addEventListener('click', function() {
    alert('hello');
}, false); 
obj[n].addEventListener('click', function() {
    console.log('hello');
}, false);

能夠添加任意多個監聽函數，同時觸發，當有耗時操做時，將耗時和非耗時操做區分開來效果比較明顯 注:事件監聽函數的格式