事件
JavaScript和HTML是通过事件来进行交互的。JavaScript采用的是异步事件驱动编程 ，当文档浏览器元素或与之相关对象发生特定事情时，浏览器会产生事件。JS关注特定类型事件 ，可以注册调用句柄来监听事件触发
事件流
事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？目前主要有三种模型
事件冒泡：
事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
事件捕获：
不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
DOM事件流：
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段
事件处理程序
即事件监听器 （linstener）
所谓事件就是用户或浏览器自身执行的操作 eg: click load mouseover
而响应事件的方法称为事件处理程序或事件监听器
HTML内联
JavaScript指定事件处理程序
把一个方法赋值给一个元素的事件处理程序属性
每个元素都有自己的事件处理程序属性
<input type="button " id="btnclick " value= "click here"/>
<script >
var btnclick=document.getElementById( "btnclick")
btnclick.onclick=function showMessage (){
alert(this.value)}
</script>
事件处理被认为是元素的方法 ，该处理程序在该元素的作用域下运行，this是当前元素
其点击结果为 click here
绑定这个过程为同步的，事件触发是异步的
缺陷:不能为同一个元素绑定多个事件，因为后面的事件会将前面的事件覆盖，还有一点这样处理默认只能在冒泡阶段进行处理
有了这两 个问题就有与之对应的解决方案
DOM2事件处理程序
定义了两个方法用于处理指定和删除事件处理程序的操作
1.addEventListener
2.removeEventListener
所有DOM节点均可以使用且 有三个参数
1.事件类型
2 事件处理方法
3.布尔参数 （true 代表在事件捕获阶段调用 false表示在事件冒泡阶段调用事件处理 ）
<input type="button " id="btnclick " value= "click here"/>
<script >
var btnclick=document.getElementById( "btnclick")
btnclick.addEventListener('click', function(){
alert(this.value)},true)
</script>
同样为btnclick添加了事件处理程序，且在捕获阶段触发 有个有点就是可以用这个方法绑定多个事件
https://jsbin.com/parolaraqo/edit?html,css,js,console,output
