js事件

事件綁定分DOM零級事件和DOM二級事件綁定

DOM零級事件綁定

div.onclick=function(){}

DOM二級事件綁定

在元素對象原型鏈上的EventTarget這個類就是DOM二級事件綁定的類,在EventTarget.prototype上提供了addEventListener/removeEventListener（移除）

單從性能角度來說,我們的DOM0級事件綁定要優於DOM2級事件綁定，因爲零級找的都是自己的私有的屬性，而二級是通過原型一級級的查找才找到的

事件對象分鼠標事件對象和鍵盤事件對象

鼠標事件對象其實就是,存儲一些關於“當前本次操作”,比如說鼠標的一些“相關的信息”(例如:鼠標操作點的座標信息等等);而頁面中只有一個鼠標所以當我進行第二次操作的時候,又重新獲取了本次操作的鼠標相關信息,並且這些信息會把上一次存儲的信息給覆蓋掉

ie下的一些兼容問題

e.clientX/e.clientY:當前鼠標的觸發點距離當前窗口(不是距離BODY)X軸/Y軸的座標

     div.onclick = function (e) {
        e = e || window.event;
        //->e.clientX/e.clientY:當前鼠標的觸發點距離當前窗口(不是距離BODY)X軸/Y軸的座標

        //[兼容性]
        //->e.target:事件源(鼠標是在哪個元素上觸發的這個行爲,那麼當前的事件源就是誰) 在IE6~8中是不存在e.target的,只能使用e.srcElement
        e.target = e.target || e.srcElement;
        //->e.pageX/e.pageY:當前鼠標的觸發點距離BODY的X軸/Y軸的座標(在IE6~8中是不存在這兩個屬性的)
        e.pageX = e.pageX || ((document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX);
        e.pageY = e.pageY || ((document.documentElement.scrollTop || document.body.scrollTop) + e.clientY);
        //->e.preventDefault:阻止默認行爲(阻止瀏覽器天生的一些行爲)
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    };

（ 我一般用於點擊任意處隱藏關閉）

事件的冒泡傳播

觸發當前元素的某一個行爲,那麼當前元素所有的父級元素,的相關行爲,都會被依次觸發(由內到外的)

阻止事件的冒泡傳播

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

真不明白我爲什麼每次都記不住，都要來複制粘貼 ……

事件傳播的整套機制:

捕獲階段->冒泡階段也有說是捕獲階段->目標階段->冒泡階段