DOM 事件对象

event对象是传给事件处理程序的唯一参数，无论DOM0 或 DOM2

let btn = document.getElementById("myBtn"); 
btn.onclick = function(event) { 
console.log(event.type); // "click" 
}; 
btn.addEventListener("click", (event) => { 
console.log(event.type); // "click" 
}, false);

公共属性和方法

使用 event.type 可以让处理函数用于处理多种不同的事件

let btn = document.getElementById("myBtn"); 
let handler = function(event) { 
  switch(event.type) { 
      case "click": 
             console.log("Clicked"); 
             break; 
         case "mouseover":
      event.target.style.backgroundColor = "red"; 
             break; 
         case "mouseout": 
             event.target.style.backgroundColor = ""; 
             break; 
     } 
}; 
btn.onclick = handler; 
btn.onmouseover = handler; 
btn.onmouseout = handler;

阻止默认行为
- preventDefault()
取消冒泡事件
1. stopPropagation()
eventPhase 可以确定事件流当前所在阶段
- 事件处理程序在捕获阶段被调用 1
- 事件处理程序在目标上被调用 2
  - 此时 this、target 和 currentTaget 三者相等
- 事件处理程序在冒泡阶段被调用 3

event对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁

IE 事件对象

与DOM事件对象不同，IE事件对象可以基于事件处理程序被指定的方式以不同方式来访问。

如果事件处理程序使用DOM0方式，则 event 对象中是 window 对象的一个属性。
使用 attachEvent() 时，event对象仍然是 window 对象的属性对象，只是出于方便也将其作为参数传入。

公共属性和方法

阻止默认行为
- window.event.returnValue = false;
取消冒泡事件
- window.event.cancelBubble = true
  跨浏览器事件对象
取消默认事件
1. 句柄方式 return false;
  1. 只能用于句柄方式，addEventListener不行
  2. 兼容性最好
2. e.preventDefault();
  1. W3C标准
  2. IE9
3. e.returnValue=false
  1. IE
对于阻止a标签默认事件
1. href=’#’
2. href=’javascript:void(0);’
3. href=’javascript:;’
4. e.preventDefault
事件源对象
- target
  - FireFox / Chrome
- srcElement
  - IE / Chrome
```
function(e){
var tar = e.target || e.srcElement
}
```

event对象获取

a.addEventListenter('click', function(ev){
  var e = ev || window.event;
})

取消冒泡事件

function cancelBubble(ev){
  var e = ev || window.event;
if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble = true;
}
}

EventUtil

var EventUtil = {
  addHandler: function(element, type, handler) {
    if(element.addEventListener) {
      element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
  } else {
      el["on" + type] = handler;
  }
},
getEvent: function(event) { 
    return event ? event : window.event; 
}, 
getTarget: function(event) { 
       return event.target || event.srcElement; 
   }, 
preventDefault: function(event) { 
       if (event.preventDefault) { 
           event.preventDefault(); 
       } else { 
           event.returnValue = false; 
       } 
}, 
removeHandler: function(element, type, handler) {
    if(element.removeEventListener) {
      element.removeEventListener(type, handler, false);
  } else if (element.dettachEvent) {
      element.dettachEvent("on" + type, handler);
  } else {
      el["on" + type] = null;
  }
}
stopPropagation: function(event) { 
       if (event.stopPropagation) { 
           event.stopPropagation(); 
       } else { 
           event.cancelBubble = true; 
       } 
   } 
}

事件对象

DOM 事件对象

IE 事件对象

跨浏览器事件对象

取消冒泡事件

EventUtil