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: 向上移動為正數，向下移動為負數