总结一些常用的事件对象属性

总结一些常用的事件对象属性

 张君卓mytac 关注

2016.12.05 18:06* 字数 300 阅读 47评论 0喜欢 1

event.type

该方法的作用是可以获取到事件的类型。

        $(function(){
            $("#btn").click(function(e){
                alert(e.type)//获取事件类型
            })
        })

运行以上代码，会弹出click

event.preventDefault()和event.stopPropagation()

在之前的文章中已经详细说过。它们的作用分别是是阻止默认事件行为和阻止事件冒泡，但原生的JavaScript的e.preventDefault()和e.stopPropagation()在ie9以下的浏览器中不生效，jquery对其进行了封装，可以兼容各个浏览器。

event.target

它的作用是获取到触发事件的元素。

    <a href="http://jianshu.com">简书</a>
    <script>
        $(function(){
            $("a").click(function(e){
                alert(e.target.href)//输出http://jianshu.com
                return false//阻止链接跳转
            })
        })
    </script>

event.relatedTarget

mouseover和mouseout所发生的元素可以通过event.target访问，相关元素时可以通过event.relatedTarget来访问的。

event.pageX和event.pageY

该方法的作用是获取光标相对于页面的x坐标和y坐标。如果不使用jquery，ie中是event.x/event.y。如果页面中有滚动条还要加上滚动条的宽度和高度。

    <a href="http://jianshu.com">简书</a>
    <p id="msg"></p>
    <script>
        $(function(){
            $("a").mouseover(function(e){
                var msg='现在的坐标为（'+e.pageX+','+e.pageY+')'
                $('#msg').text(msg)
            })
        })
    </script>

代码演示

event.which

该属性代表获取到的鼠标或键盘的输出的值。
用鼠标单击左，中，右键时值分别为1,2,3。

event.metaKey

该属性代表键盘事件中获取的ctrl键。