事件（二）处理模型--冒泡，捕获

四.事件处理模型——事件冒泡、捕获

事件处理模型：系统或元素针对事件的处理方式
注意：一个对象的一个事件类型上面绑定的一个处理函数，只能遵循一种事件模型

1. 事件冒泡：

• 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

2. 事件捕获：

• 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
• obj.addEventListener(事件类型type, 处理函数fn, true);
  IE没有捕获事件

3. 触发顺序，先捕获，后冒泡
   一个对象的一个事件类型绑定两个处理函数，一个遵循事件捕获，一个遵循事件冒泡。触发顺序是，先捕获，后冒泡
4. focus, blur, change, submit, reset, select等事件不冒泡

五.取消冒泡和阻止默认事件

1. 取消冒泡：

• 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)

2. 阻止默认事件：

• 默认事件——表单提交，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
www.xxx.com
//javascript
var a = document.getElementsByTagName('a')[0];
a.onclick = function(e) {
      cancelHandler(e);//利用上方的阻止默认事件的封装函数
}

或，行间中写javascript，冒号后的东西相当于return。
www.xxx.com