事件

obj.addEventListener(type,fn,flase)

IE9以下不兼容，可以为多个事件绑定处理函数

obj.attachEvent(on,type,fn)

IE独有，一个事件可以绑定多个处理程序

事件冒泡：结构上嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父级元素（自底向下）

这是HTML代码

<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>

这是js代码

var wrapper = document.getElementsByClassName('wrapper')[0];
var content = document.getElementsByClassName('content')[0];
var box = document.getElementsByClassName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapper')})；
content.addEventListener('click',function(){
console.log('content')})；
box.addEventListener('click',function(){
console.log('box')})；

就会出现下面图片的情况

红色是wrapper

绿色是content

黄色是box

第一次点击wrapper  出现wrapper

第二次点击content  出现content  和  wrapper

第三季点击box  出现content、wrapper  和 box

事件捕获：结构上嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）

既然理解了事件冒泡，事件捕获就好理解了。

假如我点击了box区域，则视为对box区域的执行，由父级开始捕获，打印出来的就会是  wrapper、content  和  box。从父级开始捕获，指的就是这个意思。