所有浏览器都支持event对象,只是支持的方式不一样
FireFox、Chrome等浏览器要获取到event对象,需要从函数中传入,参数名随意
而IE在浏览器中event作为window对象的一个属性存在,可以直接使用 event 或 window.event 获取到
例如:
document.onmousedown=function ( e ){
var ev = e || window.event ; //兼容各个浏览器
console.log(ev);
};
注意 var ev = e || window.event ; 顺序!
clientX/clientY属性:返回当事件被触发时,鼠标指针的坐标(到浏览器窗口的坐标)
offsetX/offsetY属性:返回当事件被触发时,鼠标指针的坐标(在事件源元素中的坐标)
pageX/pageY属性:返回当事件被触发时,鼠标指针的坐标(整个页面中的坐标)
button属性:返回触发事件的鼠标按键
which属性:返回触发事件的按键码(针对键盘和鼠标事件)
keCode属性:返回键盘按键的按键码
组合键:ctrlKey、altKey、shiftKey
在火狐中获得触发事件的元素
使用:event.target
在IE中获得触发事件的元素
使用:event.srcElement
// 兼容写法
var Target = event.target || event.srcElement;
event.relatedTarget 火狐获取触发事件的目标源,与target相反
event.fromElement IE获取触发事件的目标源,与srcElement相反
在mouseover事件中,它指向鼠标来自哪个元素
var from=event.relatedTarget || event.fromElement;
event.relatedTarget 火狐获取触发事件的目标源,与target相反
event.toElement IE获取触发事件的目标源,与srcElement相反
在mouseout事件中,它指向鼠标去往的那个元素
var to=event.relatedTarget||event.toElement;
阻止浏览器默认行为
event.preventDefault() //火狐
event.returnValue = false //IE
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止事件传播
event.stopPropagation() //火狐
event.cancelBubble = true //IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
scrollLeft:设置或获取当前左滚的距离,即左卷的距离;
scrollTop:设置或获取当前上滚的距离,即上卷的距离;
scrollHeight:获取对象可滚动的总高度;
scrollWidth:获取对象可滚动的总宽度;
onscroll 事件在元素滚动条在滚动时触发。