DOM事件对象

定义

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件 元素、事件类型以及其他与特定事件相关信息。所有浏览器都支持event对象，但支持方式不同。

事件对象引入

//IE8-浏览器输出undefined,其他浏览器则输出事件对象 <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onclick = function(a){     console.log(a); } </script>

[注意2]使用DOM2级方法时，所有浏览器都支持(IE8-浏览器不支持DOM2级方法)[注意3]使用attachEvent方法时，IE10-浏览器都支持(其他浏览器不支持attachEvent方法)

【2】event对象是事件处理程序函数中的变量event[注意1]使用DOM0级方法和使用DOM2级方法时，firefox不支持，其他浏览器都支持(IE8-浏览器不支持DOM2级方法)

//firefox浏览器输出undefined,其他浏览器则输出事件对象     <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onclick = function(){     console.log(event); }; </script>

//firefox浏览器输出undefined,其他浏览器则输出事件对象(除IE8-浏览器) <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.addEventListener('click',function(){     console.log(event);     },false); </script>

[注意2]使用attachEvent方法时，IE10-浏览器都支持(其他浏览器不支持attachEvent方法)

【3】兼容写法

<div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onclick = function(e){     var e = e || event;     console.log(e); }; </script>

事件对象的属性和方法

event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都有些共有的属性和方法

【关于冒泡】

【1】cancelBubble可以阻止冒泡，但并不能改变bubbles的值

<div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onclick = function(e){  var e = e || event;  console.log(e.cancelBubble);//false  console.log(e.bubbles)//true  e.cancelBubble = true;  console.log(e.cancelBubble);//true  console.log(e.bubbles)//true  } document.onclick = function(){  alert('document'); } </script> 

<div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onclick = function(e){  var e = e || event;  console.log(e.cancelBubble);//false  console.log(e.bubbles)//true  e.stopPropagation();  //(safari/chrome)false  //(IE/firefox)true  console.log(e.cancelBubble);    console.log(e.bubbles)//true  } document.onclick = function(){  alert('document'); } </script> 

//与上述方法不同的是，使用stopImmediatePropagation()方法会阻止页面弹出1 <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); oBox.addEventListener('click',function(e){  console.log(e.cancelBubble);//false  console.log(e.bubbles)//true  e.stopImmediatePropagation();  console.log(e.cancelBubble);  console.log(e.bubbles)//true  },false); oBox.addEventListener('click',function(e){  alert('1'); //不弹出1 },false); document.onclick = function(){  alert('document'); } </script> </body>  </html> 

【关于默认行为】使用preventDefault()和returnValue都可以用来阻止默认事件，且使defaultPrevented从false变为true,returnValue的值从true变成false,而cancelable则一直为true

//点击<a>标签后,URL结尾并没有加#，说明阻止了默认行为(firefox和IE9+浏览器不支持)  <a class="box" id="box" href="#">测试文字</a> <script> var oBox = document.getElementById('box'); oBox.onclick = function(e){  var e = e || event;  console.log(e.cancelable);//true  console.log(e.defaultPrevented);//false  console.log(e.returnValue);//true  e.preventDefault();  console.log(e.cancelable);//true  console.log(e.defaultPrevented);//true  console.log(e.returnValue);//false }; </script> 

//点击<a>标签后,URL结尾并没有加#，说明阻止了默认行为(firefox和IE9+浏览器不支持)  <a class="box" id="box" href="#">测试文字</a> <script> var oBox = document.getElementById('box'); oBox.onclick = function(e){  var e = e || event;  console.log(e.cancelable);//true  console.log(e.defaultPrevented);//false  console.log(e.returnValue);//true  e.returnValue = false;  console.log(e.cancelable);//true  console.log(e.defaultPrevented);//true  console.log(e.returnValue);//false }; </script> 

<a class="box" id="box" href="#"><div class="in">测试内容</div></a> <script> //点击<div>元素 var oBox = document.getElementById('box'); oBox.onclick = function(e){  var e = e || event;  console.log(e.currentTarget);//<a>标签  console.log(e.detail);//1(只有IE11输出0)  console.log(e.target);//<div>标签  console.log(e.srcElement);//<div>标签(firefox不支持)   console.log(e.view);//window }; </script> 

【关于事件流】

eventPhase表示调用事件处理程序的阶段：1表示捕获阶段，2表示处于目标阶段，3表示冒泡阶段【1】冒泡阶段调用事件处理程序

<ul class="list" id="list">  <li class="in" id="test"></li> </ul> <script> var oList = document.getElementById('list'); //点击li时,依次弹出li -> 3 -> document //点击ul时,依次弹出2 -> document oList.addEventListener('click',function(e){  var e = e || event;  alert(e.eventPhase);//3表示冒泡阶段 },false); var oTest = document.getElementById('test'); oTest.onclick = function(){  alert('li'); } document.onclick = function(){  alert('document'); } </script> 

【2】捕获阶段调用事件处理程序

<ul class="list" id="list">  <li class="in" id="test"></li> </ul> </body>  <script> var oList = document.getElementById('list'); //点击li时,依次弹出1 -> li -> document //点击ul时,依次弹出2 -> document oList.addEventListener('click',function(e){  var e = e || event;  alert(e.eventPhase);//2表示处于目标阶段 },true); var oTest = document.getElementById('test'); oTest.onclick = function(){  alert('li'); } document.onclick = function(){  alert('document'); } </script> 

【关于事件类型】

在需要通过一个函数处理多个事件时，可以使用type属性

<a class="box" id="box" href="#"><div class="in">测试内容</div></a> <script> var oBox = document.getElementById('box'); var handler = function(e){  var e = e || event;  switch(e.type){   case "click":    this.style.backgroundColor = "pink";    break;   case "mouseover":    this.style.backgroundColor = "lightgreen";     break;   case "mouseout":    this.style.backgroundColor = "lightblue";     break;     } } oBox.onclick = handler; oBox.onmouseover = handler; oBox.onmouseout = handler; </script> 

跨浏览器的事件对象

【1】绑定事件函数

if(obj.addEventListener){     obj.addEventListener(type,handler,false); }else{     obj.attachEvent('on' + type, handler); }

【2】解绑事件函数

if(obj.removeEventListener){     obj.removeEventListener(type,handler,false); }else{     obj.detachEvent('on' + type, handler); }

【3】获取事件对象

var handler = function(e){     e = e || event; }

【4】获取事件目标

var handler = function(e){     e = e || event;     var target = e.target || e.srcElement; }

【5】阻止默认行为

var handler = function(e){     e = e || event;     if(e.preventDefault){         e.preventDefault();     }else{         e.returnValue = false;     } }

【6】阻止事件流

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