總結一些常用的事件物件屬性

 張君卓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鍵。