onclick与addEventListener的区别

平常在自己写JS的时候常遇到onclick或者addEventListener这两种方式去绑定一个事件。

最开始写代码的时候用onclick是最多的，然后后面在慢慢的学习当中也认识到了addEventListener，只知道他们都是用来绑定事件的，却不知道他们的区别，并且自己还一再觉得使用onclick绑定事件更简单，直到看了红宝书《JavaScript高级程序设计》才逐渐理清楚了他们之间的关系及区别，下面就做一些总结：

• 相同点：
  都是事件处理程序，支持绑定响应事件的函数；
• 不同点：
  • 出现的时间不同
    • onclick是DOM0级事件处理程序，在第四代Web浏览器中出现（IE4、Netscape 4），现今浏览器依旧在使用
    • addEventListener是DOM2级事件处理程序
  • 支持捕获情况
    • onclick不支持事件捕获（也就是只支持事件冒泡）
    • addEventListener支持事件捕获，即第三个参数设置为true
  • 是否能绑定多个处理函数
    • onclick因为是DOM上的一个属性，这个属性默认只能指向一个对象，所以只支持一个处理函数
    • addEventListener支持绑定多个处理函数
  • 移除处理函数的方式不同
    • btn.onclick = null
    • removeEventListener

最后我们来看一下onclick和addEventListener的示例代码吧！

var btn = document.getElementById('myBtn')
btn.onclick = function(){
    // 在这里做你想要做的事
}

btn.onclick = null  // 绑定事件销毁
// 事件销毁主要是为了释放内存

var btn = documen.getElementById('myBtn')

var handler = function(){
    // 在这里做你想要做的事
}

btn.addEventListener('click', handler, false)  // 默认是false(冒泡),true为捕获

// 省略其他代码
btn.removeEventListener('click', handler, false)  // 事件销毁