一个对象的一个事件处理模型只能是一个（要么冒泡要么捕获）
事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
IE没有捕获事件
addEventListener后面的boolean是用来触发是冒泡还是捕获，false为冒泡，true为捕获
点击黄色区域
正好和冒泡相反，是先捕捉要外层的再逐渐到内部
如果对于同一个元素绑定多个处理函数的触发顺序是先捕获，后冒泡
点击黄色区域
发现这里有点奇怪
其实顺序没有错，只不过到了黄色区域之后就是代码执行
先是绿色区域捕获，然后是红色区域捕获，到了黄色区域就是代码执行，谁先声明，先执行谁，执行完两条黄色语句之后，然后再冒泡到红色区域，最后冒泡到绿色区域
focus,blur,change,submit,reset,select 等事件没有冒泡功能
---------------------------------------------------------------------------------------------------------------------
取消冒泡
首先讲一下事件对象，我们在事件函数中可以加一个形参，我们不用往里面传值，但是系统会往里面传递一个事件对象，里面存储了事件运行的各种状态
1，W3C标准event.stopPropagation(); 但不支持ie9以下版本
IE独有event.cancelBubble = true;
点击红色区域
2，e.cancelBubble = true;
IE独有，但是goole实现了
点击红色区域
-----------------------------------------------------------------------------------------------
阻止默认事件触发
默认事件：表单提交，a标签跳转，右键菜单
1，return false; 以对象属性的方式注册的事件才能生效（即只有使用的是句柄的方式才有效果）
2，event.preventDefault(); W3C标准，IE9以下不兼容
3，event.returnValue = false; 兼容IE
例如：阻止a标签的点击事件
点击完之后，就会变得没有反应
-------------------------------------------------------------------------------------------------------
事件对象
event || window.event （IE里面是window.event，goole里面是e）
事件源对象
event.target 火狐只有这个
event.srcElement IE只有这个
这两个chrome都有
对于一个嵌套结构，内部元素会作用到外部，内部元素就是事件源
点击绿色或者红色都会出现这句话，不同的是点击红色的时候是因为冒泡到绿色的
里面有srcElement和target 记录了事件源对象
事件委托
利用事件冒泡，和事件源对象进行处理
优点：
1，性能 不需要循环所有的元素一个个绑定时间
2，灵活 当有新的子元素时不需要重新绑定时间
点击不同的li出现数字