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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,686评论 18 503
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,641评论 2 10
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,371评论 0 8
  • 第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是...
    mo默22阅读 1,309评论 0 6
  • 开发背景 一、正常开发流程 从流程来看,传统的开发流程存在很多弊端: 重新发布版本代价太大 用户下载安装成本太高 ...
    丶金陵小霸王c阅读 1,854评论 0 0