在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
-
举例
鼠标操作导致的事件对象中，会包含鼠标位置的信息，
键盘操作导致的事件对象中，会包含按下的键有关的信息，
所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定的事件处理程序中，但支持的方式不同，所以也会涉及跨浏览器的部分。我们可以结合HTML DOM Event 对象来学习。
我们知道，特定的事件会有自己独特的属性，我们这里只看一些共有的属性
1.标准浏览器
event：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，该对象都是该事件内置对象，可以在事件处理函数内直接使用。
this：在支持至少DOM2级的浏览器内，无论使用html特性指定，dom0级，2级，都是指向当前正在处理事件的那个元素。
列举所有事件的事件对象，都会有的成员。
列举所有事件的事件对象，共同拥有的成员。
| 属性方法 | 类型 | 读写 | 描述 |
|---|---|---|---|
| bubbles | Blooean | 只读 | 表明事件是否是起泡事件类型 |
| cancelable | Blooean | 只读 | 表明是否可以取消事件的默认行为 |
| currentTarget | Element | 只读 | 其事件处理程序当前正在处理事件的那个元素 |
| target | Element | 只读 | 事件的目标 |
| eventPhase | Integar | 只读 | 调用事件处理程序的阶段：1表示捕获阶段2表示处于目标3表示冒泡阶段 |
| trusted | Blooean | 只读 | 为true表示事件是浏览器生成的，为false表示事件是由开发人员通过js创建的 |
| type | String | 只读 | 被触发的事件的类型 |
| stopPropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡，如果bubbels为true，则可以使用这个方法 |
| preventDefault() | Function | 只读 | 取消事件的默认行为，如果cancelable为true，则可以使用这个方法 |
| initEvent() | Event | 只读 | 初始化新创建的 Event 对象的属性 |
-
currentTarget：始终等于this对象，随着事件冒泡或者捕获，他的值等于捕获或冒泡到的上级元素。
-
target ：触发此事件的元素。
-
type
可以利用type属性为一个元素同时添加多类事件处理程序。
采用dom0级测试
var btn=document.getElementById('myBtn');
var handler=function(){
switch(event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.background='red';
break;
case "mouseout":
event.target.style.background='yellow';
break;
}
};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
-
eventPahse
用来确定事件当前位于事件流的哪个阶段
var btn=document.getElementById('Mybtn');//body内的div
var wrap=document.getElementById('wrap');//body
function handler(){
alert(event.eventPhase)
};
//单击btn
btn.addEventListener('click',handler,false);//2处于目标对象
wrap.addEventListener('click',handler,false);//3冒泡阶段
wrap.addEventListener('click',handler,true);//1捕获
-
cancelable、preventDefault()
只有cancelable为true时，才可以使用preventDefault()方法，来取消其默认行为。
ie低版本通过：event.returnValue=false来实现
<a href="http://www.baidu.com/" id="myherf">百度</a>
var Link=document.getElementById("myherf");
Link.onclick=function(){
event.preventDefault();
}
这样单击百度时，并不会跳转到百度的页面。
-
stopPropagation()
立即停止事件在dom层次中的传播，即取消进一步的事件捕获或冒泡。
ie通过event.cancelBubble=true;阻止传播
function handler(){
alert(event.type);
event.stopPropagation();
};
event对象只有在事件处理程序执行期间，才会存在，执行完毕即销毁。
2.IE中的事件对象
在IE8及其以前版本的浏览器是不兼容DOM2级的，但是还是可以使用dom0级的方法和自带的方法添加事件处理程序。
event：
var div=document.getElementById("test");
div.onclick=function(){
var event=window.event; //event为window对象
alert(event.type);
}
event 对象必须作为 window 对象的一个属性。event对象作为事件处理程序的内部对象。可以直接使用event.type。
html指定：event对象同样也包含于创建他的事件相关的属性和方法。
this：
html指定
html标签上直接使用this，那么等于正在处理事件的那个元素。如果是使用标签上指定函数，那么函数内的this指的是window。
dom0级方法中
this等于正在处理事件的那个元素。
使用IE的专属 attachEvent()
this等于window
- IE的event包含的对象与方法
| 属性方法 | 类型 | 读写 | 说明 |
|---|---|---|---|
| cancelBubble | Blooean | 读/写 | 默认值为false，但将其设置为true就可以取消事件冒泡，与DOM中stopPropagation()的方法作用相同 |
| returnvalue | Blooean | 读/写 | 默认值为true，但将其设置为fasle，就可以取消事件的默认行为，与DOM中的preventDefault()方法的作用相同 |
| srcElement | Element | 只读 | 事件的目标，与DOM中的target属性相同 |
- returnvalue
var div=document.getElementById("test");
div.onclick=function(){
window.event.returnValue=false;
}
但是没有办法判定默认事件能否被取消。
- cancelBubble
var div=document.getElementById("test");
div.onclick=function(){
alert('ok')
window.event.cancelBubble=true;
}
因为IE8及以前只支持冒泡所以只能取消冒泡。
既然事件对象存在浏览器兼容问题，那么封装一个跨浏览器的事件对象就很有必要！
跨浏览器的事件对象我在前面的JavaScript事件——事件冒泡，事件捕获，事件绑定与解绑，事件委托的文章末尾已经给出过了。
谢谢观看！！！
网友评论