美文网首页JavaScript学习笔记
总结一些常用的事件对象属性

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

作者: mytac | 来源:发表于2016-12-05 18:06 被阅读70次

    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键。

    相关文章

      网友评论

        本文标题:总结一些常用的事件对象属性

        本文链接:https://www.haomeiwen.com/subject/ixclmttx.html