window.event对象在IE与DOM中的异同

window.event对象在IE与DOM中的区别

1、window.event

IE:有window.event对象

DOM:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=domousemove(event)

<input type="button" onmousemove="showDiv(event);"//event不需要加引号 
function showDiv(event) 
{ 
var event=window.event||event; 
event.clientX; 
event.clientY; 
}

2 、鼠标当前坐标

通用:两者都有event.clientX和event.clientY属性。

3 、鼠标当前坐标(加上滚动条滚过的距离)

DOM:event.pageX和event.pageY

IE9以上:event.pageX和event.pageY

IE6/7/8不识别event.pageX和event.pageY,解决办法:

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度

4、鼠标到屏幕的距离

通用:两者都有event.screenX和event.screenY属性。

5、阻止冒泡

IE:event.canceBubble=true;

DOM:event.stopPropagation();

6、阻止默认事件

IE:event.returnValue=false;

DOM:event.preventDefault();

7、获取事件的目标

IE:event.srcElement;

DOM:event.target;

8、为元素绑定事件(现代方法)

IE:element.attachevent(”onclick”, func);。

DOM:element.addeventlistener(”click”, func, true)。

通用:element.onclick=func。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的, onclick只有执行一个过程,而attachevent和addeventlistener执行的是一个过程列表,也就是多个过程。

例如:element.attachevent(”onclick”, func1);element.attachevent(”onclick”, func2)这样func1和func2都会被执行。

原文地址:https://www.cnblogs.com/yddlvo/p/4641539.html