四.事件处理模型——事件冒泡、捕获
事件处理模型：系统或元素针对事件的处理方式
注意：一个对象的一个事件类型上面绑定的一个处理函数，只能遵循一种事件模型
- 事件冒泡：
- 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
- 事件捕获：
- 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
- obj.addEventListener(事件类型type, 处理函数fn, true);
IE没有捕获事件
- 触发顺序，先捕获，后冒泡
一个对象的一个事件类型绑定两个处理函数，一个遵循事件捕获，一个遵循事件冒泡。触发顺序是，先捕获，后冒泡 - focus, blur, change, submit, reset, select等事件不冒泡
五.取消冒泡和阻止默认事件
- 取消冒泡：
- W3C标准event.stopPropagation();但不支持ie9以下版本
(1)事件对象：在每个事件处理函数上面可以写一个形参，系统会帮助传这个形参即事件对象，事件对象上面有很多属性，属性记载了事件发生时的一系列数据和信息，以供使用。
(2) event.stopPropagation()为事件对象e上的一个属性
eg:
document.onclick = function(){
console.log('xxx');
}
var div = document.getElementByTagName('div');
div.onclick = function(e) {
//e即为事件对象
e.stopPropagation();
this.style.background = "green";
//如果没有上面一行的取消冒泡操作，
//点击div时背景既会变成绿色，也会打印console.log中的内容。
//（因为他是整个页面上的点击事件内容）
}
- IE独有 event.cancelBubble = true;
- 封装取消冒泡的函数stopBubble(event)
- 阻止默认事件：
- 默认事件——表单提交，a标签跳转，右键菜单等
（1）return false;以对象属性的方式注册的事件才生效
阻止右键弹出菜单
document.oncontextmenu = function() {
console.log('a');
return false;
}
（2）event.preventDefault();W3C标准，IE9以下不兼容
document.oncontextmenu = function(e) {
e.preventDefault();
console.log('a');
}
（3）event.returnValue = false;兼容IE
（4）封装阻止默认事件的函数cancelHandler(event);
function cancelHandler(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue = false;
}
}
- a标签跳转默认跳到页面的开头，如何去掉这个默认事件呢？
//html
<a href = "#">www.xxx.com</a>
//javascript
var a = document.getElementsByTagName('a')[0];
a.onclick = function(e) {
cancelHandler(e);//利用上方的阻止默认事件的封装函数
}
或，行间中写javascript，冒号后的东西相当于return。
<a href = "javascript:void(false)">www.xxx.com</a>
