事件对象，事件监听，事件冒泡，事件代理

一、事件对象

document.onclick = function(e){
  e = e || window.event;  //兼容的写法
}

二、冒泡事件：（事件从子元素往父级元素向上触发事件）
处理兼容问题：
主流浏览器：e.stopPropagation()
低版本IE浏览器：e.cancelBubble = true;

var oBox = document.getElementById("box");
document.onclick = function(e){
  e = e || window.event;
  console.log(111);
}
oBox.onclick = function(e){
  e = e || window.event;
  //e.stopPropagation(); //阻止冒泡
  e.cancelBubble = true;
  console.log(222);
}
wrap.onclick = function(){
  console.log(333);
}

三、事件监听
addEventListener(type, function(){}, boolean);

var oBox = document.getElementById("box");
//DOM零级写法
oBox.onclick = function(){
  console.log(123);
}
oBox.onclick = function(){
  console.log(321);
}
//DOM二级写法
oBox.addEventListener("click", function(e){
  e.stopPropagation();
  console.log("盒子被点击了");
});
document.addEventListener("click", function(){
  console.log("文档被点击了");
});

四、事件捕获
addEventListener(type, function(){}, boolean);
事件冒泡：从下往上；
事件捕获：从上往下；
boolean:
true：事件捕获
false：事件冒泡
执行顺序：先进行捕获之后再冒泡

var oBox = document.getElementById("box");
document.addEventListener("click", function(){
  console.log("文档被点击了");
});
wrap.addEventListener("click", function(){
  console.log("wrap也被点击了");
},true);
oBox.addEventListener("click", function(e){
  console.log("盒子被点击了");
},true);

五、事件代理

document.addEventListener("click", function(e){
  console.log(e.target);
  console.log(e.target.tagName);
  if(e.target.tagName === "DIV"){
    console.log("事件源是div");
  }else{
    console.log("事件源不是div");
    e.target.innerHTML = "123";
  }
});

六、清除监听：removeEventListener
DOM零级清除方式：document.onclick = null;

function fn(e){
  console.log(123);
}
document.addEventListener("click", fn);
document.removeEventListener("click", fn);

七、事件监听兼容问题
监听兼容：
addEventListener(type, fn)
attachEvent(type, fn) 注意：此时是"on" + type，只支持事件冒泡，不支持事件捕获

function fn(e){
  e = e || window.event;
  console.log(123);
}
document.attachEvent("onclick", fn);