首先是一个小例子:
<input type="text" onclick="a(event)"/>
function a(event){
console.log(event)
}
event对象代表事件的状态,包括事件在其中发生的元素,键盘按键的状态、鼠标的位置、鼠标按键的状态
有MouseEvent(click,mouseover...),FocusEvent(focus)等
这里输出MouseEvent{}, 包含以下属性:
详情: http://zccst.iteye.com/blog/1806261
详解:
鼠标/键盘属性:
altKey 事件发生时,alt键有没有被按下(布尔)
ctrlKey 事件发生时,ctrl键有没有被按下(布尔)
shiftKey 事件发生时,shift键有没有被按下(布尔)
metaKey 事件发生时,meta键有没有被按下(布尔)在windows下meta就是那个飘小旗的键 在苹果系统中就是Cmd键
button 事件发生时,鼠标哪一个按键被点击(左键0/右键1)
relatedTarget 与事件发生的目标节点相关的节点(没有为null)
-----------------------------------------------------------------------------------------------------------------------------
各种定位:
clientX 事件发生时,鼠标水平坐标(数字)
clientY 事件发生时,鼠标垂直坐标(数字)
兼容性 全部
参照点为当前浏览器内容区域的左上角,随着滚动条的移动,参照点会改变
screenX screenY 与clientX类似,返回数字
参照点为电脑屏幕而非浏览器
兼容性 全部
pageX pageY
参照点为浏览器内容区域的左上角,不随滚动条的移动而改变
兼容性 chrome firefox opera IE9+
offsetX offsetY
参照点为该元素内容的的左上角,如果有border,可能出现负值
兼容性 chrome opera safari IE6+(原IE独有)
layoutX layoutY
参照点为1.若触发元素为绝对定位或相对定位,则以触发元素的border为参照物(类似offsetX,不过以border为参照物,不会有负值!)
2.若不是,以页面为参照物
3.IE为相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离
兼容性 chrome firefox safari IE9+(原firefox独有)
x y
原IE独有,部分浏览器支持,不过能不用就不用!
具体可参考:
http://blog.sina.com.cn/s/blog_780a94270101kdgo.html
http://shanmao.me/web/js/pagex-clientx-offsetx-layerx-de-qu-bie
这些属性只有chrome和safari全部支持,但只有screenX和clientX符合w3c标准!
------------------------------------------------------------------------------------------------------------标准event属性:
bubbles 时间是否为起泡事件(布尔)
cancelable 事件是否有可取消的默认动作
currentTarget 触发该事件的元素(该元素或其子元素)
target 目标节点
timeStamp 事件生成的时间(毫秒数)
type 事件名称(比如 "click", "mouseover")
eventPhase 事件传播的当前阶段(捕获阶段1 正常事件派发2 起泡阶段3)
--------------------------------------------------------------------------------------------------------------------------------
标准event方法:
initEvent() 初始化新创建的Event对象的属性
preventDefault 阻止默认动作
stopPropagation 不再派发事件
---------------------------------------------------------------------------------------------------------------------------------
IE属性:
cancelBubble 阻止事件传播到包容对象(布尔值) 类似于stopPropagation ()
returnValue 取消默认动作 类似于preventDefault()
srcElement 生成事件的window对象,document对象或element对象 类似于target()
余下IE属性局限性大,不再解释,详情请看链接页面
--------------------------------------------------------------------------------------------------------
兼容性写法:
1.event
event || (event= window.event)
eg: function a(event){
event || (event= window.event);
}
2.target
var target= event.target || event.srcElement;
3.preventDefault()
event.preventDefault? event.preventDefault(): (event.returnValue= false);
4.stopPropagation()
event.stopPropagation? event.stopPropagation(): (event.cancelBubble= true);