事件
JavaScript与HTML的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻，可以使用仅在事件发生时执行的监听器(处理程序)订阅事件，这个模型叫观察者模式，使能做到页面行为和页面展示的分离。
事件流
当点击一个按钮不仅点击了这个按钮，还有它的容器和整个页面。事件流描述了页面接收事件的顺序。
- 事件冒泡：事件从最具体的元素开始出发向上传播到没那么具体的元素。
- 事件捕获：事件从最不具体的元素开始传播到最具体的元素。
- DOM事件流：dom2规范事件流分三个阶段，先捕获，到达目标，再冒泡
事件处理程序(监听器)
为响应事件而调用的函数，以on开头，比如click事件的处理程序为onclick
- HTML事件处理程序：用处理程序名以html属性的形式指定，属性值必须是可执行的js代码，this是所在目标元素
- DOM0事件处理程序：把一个函数赋值给一个事件处理程序属性，此时this等于元素，赋值null就是移除
- DOM2事件处理程序：定义了addEventListener和removeEventListener函数，暴露在所有dom节点上，接收三个参数，事件名、事件处理函数、布尔值(默认false为冒泡阶段调用事件处理函数，跨浏览器兼容性好，捕获阶段常用于在事件到达指定目标前拦截事件)，多个事件处理函数会以添加顺序来触发。必须用remove来移除add的程序没所以添加的匿名函数无法移除
- IE事件处理程序：attachEvent和detachEvent，接受两个参数，添加到冒泡阶段，会以添加事件顺序反向触发
- 跨浏览器事件处理程序：addHandler和removeHandler，目标元素、事件名、事件处理函数。首先检测是否存在DOM2方式，如果有就使用该方式，否则就看是否存在IE方式，最后看DOM0方式。
事件对象
dom发生事件所有相关信息都被收集和存储到event对象中。
- currentTarget是当前事件处理程序所在的元素，target是事件目标。this对象始终等于currentTarget的值，而target只包含事件的实际目标，如果事件处理程序直接加在了意图的目标，则this、target、currentTarget的值是一样的。但如果是添加到父节点，那么target还是会指向实际目标，而currentTarget就会指向父元素，事件会通过冒泡的形式触发处理程序。
ducument.body.onclick=function(event){
console.log(event.currentTarget===document.body);
console.log(this===document.body);
console.log(event.target===document.getElementById("myBtn"));
}
- preventDefault：取消默认行为
- stopPropagation：立即阻止事件流在DOM结构中传播，取消后续的事件捕获或冒泡，比如在添加到按钮的事件处理程序里调用后，可阻止document.body上注册的事件处理程序执行。
- eventPhase：确定事件流所处阶段
