DOM Event: 如何处理事件

本文很大程度上参考、整理自《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...');
});

这是当下推荐的监听元素事件的模式。