Javascript和jquery事件--鼠標移動事件mousemove

mousemove,一個監聽元素上鼠標移動的事件，如果鼠標在元素上移動，大概每16毫秒觸發一次。我覺得挺有趣的一個元素，不過有替代還是不太推薦，從這個事件的觸發頻率就可以看出它會拖慢響應速度，消耗資源。

在js中可以使用onmousemove和addEventListener(‘mousemove’,fn)來設置

在jq中可以直接綁定mousemove的監聽器，也可以使用封裝好的函數mousemove()

 

           //********顯示元素的id和type
            var t = null;
            function showit(e){
                var e = e||window.event||event;
                //console.log(e.movementY);
                
                console.log(e.target.getAttribute('id'));
                console.log(e.type);
                var temp = e.timeStamp;
                if(t!=null){
                    console.log(temp-t);
                }
                t = temp;
                
            }
            
            //********js的mousemove
            document.getElementById('c1').onmousemove=showit;
            
            
            
            //*********jquery也可以使用mousemove
            //$('#c2').on('mousemove',showit);
            //$('#c2').onmousemove=showit;//無效
            $('#c2').mousemove(showit);

 

在mousemove中我們關注的應該是鼠標的位置和移動方向，關於鼠標的位置，之前就有提過，在事件對象event中可以看到：

　　PageX，PageY獲得鼠標相對頁面的位置。

　　clientX，clientY獲得的是鼠標相對瀏覽器的位置。

　　screenX，screenY獲得的是鼠標相對當前頁面屏幕的位置

　　offsetX，offsetY是鼠標在觸發事件的元素中的位置。

通過位置的變化也可以獲得鼠標方向，不過事件對象也有提供與mousemove事件相關的兩個參數:

　　movementX: 向左移動為負數，向右移動為正數

　　movementY: 向上移動為正數，向下移動為負數