獲取元素樣式屬性

事件對象

作用：捕獲用戶的操作行為
事件對象的獲取：
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事件的獲取