本文很大程度上參考、整理自《DOM Enlightenment》及網絡
當下的HTML有三種方式監聽/handle事件：
- Inline Event Handlers
- Event Handlers
- addEventListener()
Inline Event Handlers
直接通過html來對一個元素添加事件handler：
<button onclick="console.log('Button clicked...')"></button>
這種方式不但有下面”Event Handlers“的所有缺陷，而且本身是在全局作用域里執行”console.log('Button clicked')“。你應該盡量避免使用這種模式。
Event Handlers
在js里設置元素的事件的handler：
document.querySelector('button').onclick = function() {
console.log('Button clicked...');
}
這種方式最大的問題是，對同一個元素及事件我不能設置兩個handler：
document.querySelector('button').onclick = function() {
console.log('這段內容不會被log');
}
document.querySelector('button').onclick = function() {
console.log('Button clicked...');
}
同樣你應該盡量避免使用Event Handlers，而是使用下面的addEventListener。
addEventListener
這是DOM Level 2 Event的內容，能夠監聽一個元素的事件并執行回調：
document.querySelector('button').addEventListener('click', function() {
console.log('Button clicked...');
});
這是當下推薦的監聽元素事件的模式。
