你的位置:首页 > Java教程

[Java教程]DOM事件对象


定义

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

 

事件对象引入

  兼容DOM的浏览器会将一个event对象传入到事件处理程序中。
  【1】event对象是事件处理程序函数的第一个参数。
  [注意1]使用DOM0级方法时,IE8-浏览器不支持。

//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对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。不过,所有事件都有些共有的属性和方法

【IE8-浏览器不支持的有】
  [1]【bubbles】
    bubbles是Boolean类型值,且只读,表明事件是否冒泡(默认为true,且设置阻止冒泡后,其值不改变)
  [2]【cancelable】
    cancelable是Boolean类型值,且只读,表明是否可以取消事件的默认行为
  [3]【currentTarget】
    currentTarget是Element类型值,且只读,表明其事件处理程序当前正在处理事件的那个元素
  [4]【defaultPrevented】
    defaultPrevented是Boolean类型值,且只读,true表明已经调用了perventDefault()
  [5]【detail】
    detail是Integer类型值,且只读,表示与事件相关的细节信息(IE11和其他浏览器显示不一样)
  [6]【eventPhase】
    eventPhase是Integer类型值,且只读,表示调用事件处理程序的阶段:1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段
  [7]【preventDefault()】
    preventDefault()是Function类型值,且只读,表示取消事件的默认行为。如果cancelable是true,则可以使用这个方法
  [8]【stopImmediatePropagation()】
    stopImmediatePropagation()是Function类型值,且只读,表示取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用
  [9]【stopPropagation()】
    stopPropagation()是Function类型值,且只读,表示取消事件的进一步捕获或冒泡,如果bubbles为true,则可以使用这个方法
  [10]【target】
    target是Element类型值,且只读,表示事件的目标
  [11]【trusted】
    trusted是Boolean类型值,且只读,为true时表示事件是浏览器生成的,为false时表示事件是由开发人员通过Javascript创建的(所有浏览器都不支持)
  [12]【view】
    view是AbstractView类型值,且只读,与事件关联的抽象视图。等同于发生事件的window对象

【IE8-浏览器支持的有】
  [1]【type】
    type是String类型值,且只读,表示被触发的事件的类型
  [2]【cancelBubble】
    cancelBubble是Boolean类型值,且可读写,默认值是false,但将其设置为true可以取消事件冒泡,与stopPropagation()方法的作用相同
  [3]【srcElement】
    srcElement是Element类型值,且只读,表示事件的目标,与target属性相同(firefox不支持)
  [4]【returnValue】
    returnValue是Boolean类型值,且可读写,默认值是true,但将其设置为false就可以取消事件的默认行为,与preventDefault()方法的作用相同(firefox和IE9+浏览器不支持)

 

【关于冒泡】

【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>

 

【2】stopPropagation()与stopImmediatePropagation()都是可以同时阻止冒泡和捕获,但后者还可以阻止后续的该元素绑定的同类型的事件。
  [注意1]IE和firefox可以改变cancelBubble的值,chrome和safari无法改变
  [注意2]所有浏览器的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.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>

 

【关于事件相关信息】
  currentTarget表示对象中的this
  detail表示事件细节信息(只有IE11与其他浏览器不一致)
  target和srcElement都表示事件的实际目标,其他IE8-浏览器只支持srcElement,而firefox只支持target
  view一般用于表示window

<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 -> documentoList.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 -> documentoList.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;  }}