event小解

首先是一个小例子:

<input type="text" onclick="a(event)"/>

function a(event){
   console.log(event)
}

event对象代表事件的状态，包括事件在其中发生的元素，键盘按键的状态、鼠标的位置、鼠标按键的状态

有MouseEvent（click，mouseover...）,FocusEvent(focus)等

这里输出MouseEvent{}, 包含以下属性:

1. altKey: false
2. bubbles: true
3. button: 0
4. buttons: 0
5. cancelBubble: false
6. cancelable: true
7. charCode: 0
8. clientX: 79
9. clientY: 24
10. ctrlKey: false
11. currentTarget: null
12. dataTransfer: null
13. defaultPrevented: false
14. detail: 0
15. eventPhase: 0
16. fromElement: null
17. keyCode: 0
18. layerX: 79
19. layerY: 24
20. metaKey: false
21. movementX: 0
22. movementY: 0
23. offsetX: 71
24. offsetY: 13
25. pageX: 79
26. pageY: 24
27. path: Array[5]
28. relatedTarget: null
29. returnValue: true
30. screenX: 105
31. screenY: 179
32. shiftKey: false
33. srcElement: input
34. target: input
35. timeStamp: 1477020320584
36. toElement: input
37. type: "mouseover"
38. view: Window
39. webkitMovementX: 0
40. webkitMovementY: 0
41. which: 0
42. x: 79
43. y: 24

详情: 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);