js事件的擷取

標籤：函數   header   eve   ie8   事件對象   距離   method   listener   listen   

擷取元素樣式屬性

Method	DES
clientWidth	擷取元素寬度
clientHeight	擷取元素高度（內容+內邊距）
document.body.clientWidth	擷取body寬度
document.body.clientHeight	擷取body高度
offsetWidth	包括邊框寬度
offsetHeight	包括邊框高度（內容+內邊距+邊框）
offsetLeft	距離左邊距離
offsetTop	距離右邊距離，當前元素距離定位父級的

事件對象

作用：捕獲使用者的操作行為
事件對象的擷取：
1、全域event對象--IE9+,chrome
2、形參接收方式--

document.onclick = function(m){        m = m || event;//相容ie,chrome及IE8-        alert(m);    }

//拖拽var box = document.getElementById("box");//擷取box元素ID    box.onmousedown = function(m){        m = m || event;//相容瀏覽器        var initX = m.clientX,//定義滑鼠初始位置            initY = m.clientY,            initLeft = box.offsetLeft,//box初始位置            initTop = box.offsetTop;            document.onmousemove = function(m){                m = m || event;                var moveX = m.clientX,//滑鼠拖拽位置                    moveY = m.clientY,                    changeX = moveX - initX,//拖拽改變距離                    changeY = moveY - initY;                    console.log(changeX,changeY);//列印出改變距離                box.style.left = initLeft + changeX + "px";//box最終顯示位置                box.style.top = initTop + changeY +"px";            }    }    document.onmouseup = function(){//當滑鼠釋放時，跳出移動操作        document.onmousemove = null;    }//注意：box.onmousemove和document.onmousemove的差別，前者不需要長按住滑鼠，而後者需要

冒泡事件

當父元素和子項目都綁定了“相同事件”，
子項目觸發事件的時候會傳遞給父元素，相當於父元素也觸發了事件 ——— 事件傳播，冒泡事件

var parent = document.getElementById("parent");    var box = document.getElementById("box");    box.onmouseover = function(m){        m = m || event;//相容模式        m.cancelBubble = true;//阻止冒泡        console.log("子節點");    }    parent.onmouseover = function(){        console.log("父節點=======");    }

監聽事件

addEventListener(‘click‘, fn2, false) //chrome、IE9+    removeEventListener(‘click‘, fn2, false)        參一：註冊的事件的事件名字        參二：註冊事件的函數        參三：true捕獲事件，false冒泡事件(預設值)。attachEvent(‘onclick‘, fn1) //IE8-執行順序相反       detachEvent(‘onclick‘, fn1);        參一：事件名字        參二：註冊事件的函數

//相容模式 function addEvent(dom,eventName,fun){//定義函數        if(dom.addEventListener){//判斷事件相容的瀏覽器是否為chrome、IE9+            dom.addEventListener(eventName,fun);        }else{//否者執行IE瀏覽器模式下事件            dom.attachEvent(‘on‘+eventName,fun);        }    }    addEvent(document,‘click‘,fn1);//調用函數    addEvent(document,‘click‘,fn2);

鍵盤事件

根據輸入鍵盤值（keycode）響應事件；

//例：輸入上下左右調整模組var box = document.getElementById("box");    document.onkeydown = function(m){//傳入參數        m = m || event;//相容模式                var boxLeft = box.offsetLeft,//定義初始距離            boxTop = box.offsetTop;        switch(m.keyCode) {//傳遞鍵盤值參數進行迴圈            case 37://左鍵keycode=37                boxLeft -= 5;//移動距離                break;            case 38://上鍵keycode=38                boxTop -= 5;                break;            case 39://右鍵keycode=39                boxLeft += 5;                break;            case 40://下鍵keycode=40                boxTop += 5;                break;            default://其他情況                console.log("請輸入上下左右按鍵");        }        box.style.left = boxLeft + "px";//賦值變換後的距離        box.style.top = boxTop + "px";    }

js事件的擷取