转载

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 -> 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;     } }
正文到此结束
Loading...