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);

原文地址:https://www.cnblogs.com/yanze/p/5984988.html