onclick()：1.这种写法是DOM0级规范的写法；2.是所有的浏览器支持的；3.这种写法不能同时绑定多个事件、使代码耦合在了一起。

addEventListener() ：1.是DOM2标准中定义的方法；2.可支持同时绑定多个事件；3.它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序。4.既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera支持）

事件捕获：事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

事件冒泡：事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

看例子：

结果：

两次点击事件都会执行

addEventListenert() 第一个参数填写事件名，第二个参数是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理,不写第三个参数默认false

只执行最后一次的点击事件

运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成