事件

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