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

  • 相关阅读:
    $('div','li') 和 $('div , li') 和 $('div li') 区别
    javascript代码放在jsp页面中的位置总结
    使用spring @Scheduled注解执行定时任务
    Mybatis学习之与Spring整合
    Mybatis学习之注解
    Mybatis学习之一对多关联查询
    Jenkins Pipeline
    2020-11-22 Windows随笔
    Python BeautifulSoup4合并table单元格
    python call cmd
  • 原文地址:https://www.cnblogs.com/yanze/p/5984988.html
Copyright © 2020-2023  润新知