谈谈事件对象-event

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括导致事件的元素,事件类型以及其他与特定事件相关的信息.

DOM中的事件对象

兼容DOM的浏览器会将一个event传入事件处理程序中

//html




//css
var btn  = document.getElementById('btn');
btn.onclick = function(event){
  console.log(event);
  console.log(event.type);
}

event输出是一个对象,并且非常庞大,在此截取一部分如下

event

event.type输出是一个字符串'click', type是 event的一个属性,表示事件类型

• 常见的event属性/方法
  1.cancelable:是否可以取消事件的默认行为
  2.bubbles:事件是否冒泡
  3.currentTarget:/事件处理程序当前正在处理的那个元素
  4.target:事件的实际目标
  5.type:被触发的事件类型
  6.eventPhase:表示事件处理程序的阶段,1表示捕获2表示处于目标3表示冒泡阶段
  7.preventDefault():取消事件的默认行为,如果cancelable属性是true,则可以使用这个方法
  8.stopPropagation():取消事件的进一步捕获或者冒泡,如果bubbles为true则可以调用这个方法

只有在事件处理程序执行阶段,event才存在,一旦执行完成,event就会被销毁

IE中的事件对象

与访问DOM中的事件对象不同,访问IE中的event对象有几种不同的方式,取决于指定时间处理程序的方法

• 使用DOM0级方法添加事件处理程序

//html




//css
var btn  = document.getElementById('btn');
btn.onclick = function(){
  var event = window.event; //通过Window对象获取event对象
  alert(event.type);//'click'
}

• 使用attachEvent()方法添加的事件处理程序

var btn = document.getElementById('btn');
btn.attachEvent('onclick',function(event){//可以通过window.event访问,也可作为参数传递
   alert(event.type);
});

• 常见的属性和方法
  1.cancelBubble:默认值为false,设置为true就可以取消事件冒泡
  2.returnValue:默认值为false,设置为true就可以取消事件的默认行为
  3.srcElement:事件的目标
  4.type:被触发的事件类型