JavaScript的事件對象中的特殊屬性和方法（鼠標，鍵盤）

時間 2019-11-17

標籤 javascript 事件對象特殊屬性方法鼠標鍵盤欄目 JavaScript 简体版

原文原文鏈接

鼠標操做致使的事件對象中的特殊屬性和方法javascript

鼠標事件是 Web 上面最經常使用的一類事件，畢竟鼠標仍是最主要的定位設備。那麼經過事件對象能夠獲取到鼠標按鈕信息和屏幕座標獲取等css

鼠標按鈕html

只有在主鼠標按鈕被單擊時(常規通常是鼠標左鍵)纔會觸發 click 事件，所以檢測按鈕的信息並非必要的java

但對於 mousedown 和 mouseup 事件來講，則在其 event 對象存在一個 button 屬性，表示按下或釋放按鈕chrome

<script type="text/javascript">
    window.onload = function(){
        document.onclick = function (evt) {
            var e = evt || window.event;             //實現跨瀏覽器兼容獲取 event 對象
            alert(e.button);
        };
    };
</script>
</head>
<body>
    <input  type="button" value="按鈕"/>
</body>

在絕大部分狀況下，咱們最多隻使用主次中三個單擊鍵，IE 給出的其餘組合鍵通常沒法使用上。因此，咱們只須要作上這三種兼容便可。數組

<script type="text/javascript">

    function getButton(evt) {                 //跨瀏覽器左中右鍵單擊相應
        var e = evt || window.event;
        if (evt) { 　　　　　　　　        //Chrome 瀏覽器支持 W3C 和 IE
            return e.button; 　　　　　　//要注意判斷順序
        } else if (window.event) {
            switch(e.button) {
                case 1 :
                    return 0;
                case 4 :
                    return 1;
                case 2 :
                    return 2;
            }
        }
    }
    window.onload = function(){
        document.onmouseup = function(evt){ //調用
            if(getButton(evt) == 0) {
                alert('按下了左鍵！');
            }else if(getButton(evt) == 1){
                alert('按下了中鍵！');
            }else if(getButton(evt) == 2){
                alert('按下了右鍵！' );
            }
        };
    };
</script>

可視區及屏幕座標瀏覽器

事件對象提供了兩組來獲取瀏覽器座標的屬性，一組是頁面可視區左邊，另外一組是屏幕座標函數

<style>
    #box{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<script type="text/javascript">
    window.onload = function () {
        var oDiv = document.getElementById('box')
        oDiv.onclick = function (evt) {
            console.log(evt.clientX + ',' + evt.clientY);
            console.log(evt.screenX + ',' + evt.screenY);
        };
    }
</script>
<body>
    <div id="box"></div>
</body>

<style type="text/css">
    #areaDiv {
        border: 1px solid black;
        width: 300px;
        height: 50px;
        margin-bottom: 10px;
    }
    #showMsg {
        border: 1px solid black;
        width: 300px;
        height: 20px;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        /*
         * 當鼠標在areaDiv中移動時，在showMsg中來顯示鼠標的座標
         */
        //獲取兩個div
        var areaDiv = document.getElementById("areaDiv");
        var showMsg = document.getElementById("showMsg");
        
        /*
         * onmousemove
         *     - 該事件將會在鼠標在元素中移動時被觸發
         * 
         * 事件對象
         *     - 當事件的響應函數被觸發時，瀏覽器每次都會將一個事件對象做爲實參傳遞進響應函數,
         *         在事件對象中封裝了當前事件相關的一切信息，好比：鼠標的座標  鍵盤哪一個按鍵被按下  鼠標滾輪滾動的方向。。。
         */
        areaDiv.onmousemove = function(event){
            /*
             * 在IE8中，響應函數被觸發時，瀏覽器不會傳遞事件對象，
             *     在IE8及如下的瀏覽器中，是將事件對象做爲window對象的屬性保存的
             */
            //解決事件對象的兼容性問題
            event = event || window.event;
            
            /*
             * clientX能夠獲取鼠標指針的水平座標
             * cilentY能夠獲取鼠標指針的垂直座標
             */
            var x = event.clientX;
            var y = event.clientY;

            //在showMsg中顯示鼠標的座標
            showMsg.innerHTML = "x = "+x + " , y = "+y;
        };
    };
</script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>

實現一個div跟隨着鼠標移動編碼

    <style type="text/css">
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            //使div能夠跟隨鼠標移動
            var box1 = document.getElementById("box1");//獲取box1

            document.onmousemove = function(event){ //綁定鼠標移動事件
                //解決兼容問題
                event = event || window.event;
                
                //獲取滾動條滾動的距離
                /*
                 * chrome認爲瀏覽器的滾動條是body的，能夠經過body.scrollTop來獲取
                 * 火狐等瀏覽器認爲瀏覽器的滾動條是html的，
                 */
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
              
                //獲取到鼠標的座標
                /*
                 * clientX和clientY
                 *     用於獲取鼠標在當前的可見窗口的座標
                 * div的偏移量，是相對於整個頁面的
                 * 
                 *  pageX和pageY能夠獲取鼠標相對於當前頁面的座標
                 *     可是這個兩個屬性在IE8中不支持，因此若是須要兼容IE8，則不要使用
                 */
                var left = event.clientX;
                var　top = event.clientY;
                
                //設置div的偏移量
                box1.style.left = left + sl + "px";
                box1.style.top = top + st + "px";
            };
        };
    </script>
</head>
<body style="height: 1000px;width: 2000px;">
    <div id="box1"></div>
</body>

修改鍵spa

有時，咱們須要經過鍵盤上的某些鍵來配合鼠標來觸發一些特殊的事件

這些鍵爲：Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 鍵，蘋果機中是 Cmd 鍵)，它們常常被用來修改鼠標事件和行爲，因此叫修改鍵。（結合鼠標）

<style>
    #box{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>
<script type="text/javascript">
    function getKey(evt) {
        var e = evt || window.event;
        var keys = [];
        if (e.shiftKey){
            keys.push('shift'); //給數組添加元素
        }
        if (e.ctrlKey){
            keys.push('ctrl');
        }
        if (e.altKey){
            keys.push('alt');
        }

        return keys;
    }
    window.onload = function(){
        var oDiv = document.getElementById('box')
        oDiv.onclick = function (evt) {
            console.log(getKey(evt));
        };
    };
</script>
<body>
    <div id="box"></div>
</body>

鍵盤操做致使的事件對象中的特殊屬性和方法

用戶在使用鍵盤時會觸發鍵盤事件。「DOM2 級事件」最初規定了鍵盤事件，結果又刪除了相應的內容。最終仍是使用最初的鍵盤事件，不過 IE9 已經率先支持「DOM3」級鍵盤事件。

鍵碼

在發生 keydown 和 keyup 事件時，event 對象的 keyCode 屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。

對數字字母字符集，keyCode 屬性的值與 ASCII 碼中對應小寫字母或數字的編碼相同。字母中大小寫不影響

window.onload = function(){
    document.onkeydown = function (evt) {
        alert(evt.keyCode); //按任意鍵，獲得相應的 keyCode
    };
};

不一樣的瀏覽器在 keydown 和 keyup 事件中，會有一些特殊的狀況：

在 Firefox 和 Opera 中，分號鍵時 keyCode 值爲 59，也就是 ASCII 中分號的編碼；而 IE和 Safari 返回 186，即鍵盤中按鍵的鍵碼。

若是用keypress返回keyCode，在火狐中全部的字符鍵都返回0，不是字符鍵沒反應。Chrome，IE支持keypress返回keyCode，並且還支持大小寫

window.onload = function(){
    document.onkeypress = function (evt) {
        alert(evt.keyCode); //按任意鍵，獲得相應的 keyCode
    };
};

字符編碼

Firefox、Chrome 和 Safari 的 event 對象都支持一個 charCode 屬性，這個屬性只有在發生 keypress 事件時才包含值，並且這個值是按下的那個鍵所表明字符的 ASCII 編碼。

此時的 keyCode 一般等於 0 或者也可能等於所按鍵的編碼。IE 和 Opera 則是在 keyCode 中保存字符的 ASCII 編碼。

window.onload = function(){
    document.onkeypress = function (evt) {
        alert(evt.charCode);         //按任意鍵，獲得相應的字符編碼
    };
};

事件對象中還提供了幾個屬性：altKey，ctrlKey，shiftKey，這個三個用來判斷alt ctrl 和 shift是否被按下，若是按下則返回true，不然返回false

<script type="text/javascript">
  window.onload = function(){
    document.onkeydown = function(event){
      event = event || window.event;
      if(event.ctrlKey){
        console.log("ctrl被按下了"); // 結果就是當焦點在document上的時候按下ctrl就會執行
      }
    }
  };
</script>