在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括导致事件的元素,事件类型以及其他与特定事件相关的信息.
DOM中的事件对象
兼容DOM的浏览器会将一个event传入事件处理程序中
//html
<body>
<input id = 'btn' type = 'button'/>
</body>
//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
<body>
<input id = 'btn' type = 'button'/>
</body>
//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:被触发的事件类型
网友评论