Javascript之事件

一、什麼事事件？

    事件分爲兩部分：1->行爲自己：瀏覽器天生就賦予其的行爲 onclick、onmouseover、onmouseenter、onmouseout、onmouseleave、onmousemove、onmousedown、onmouseup、onmousewheel(鼠標滾動事件)、onscroll(滾動條滾動行爲)、onesize(window.onresize；瀏覽器窗口的大小改變事件)、onload、onunload（瀏覽器關閉事件）、onfocus(文本框獲取焦點事件)、onblur(文本框失去焦點事件)、onkeydown、onkeyup(瀏覽器按下和擡起行爲)......

    哪怕沒有給上述的行爲綁定方式，事件也是存在的，當咱們點擊的時候，一樣會觸發它的onclick行爲，只是什麼都沒有作而已，可是這個事件是存在的

    2->事件綁定：給元素的某一個行爲綁定方法：

    //DOM0級事件綁定

    Ele.onclick = function(){}  //  onclick這個行爲定義在當前元素的私有屬性上

    //DOM2級 事件綁定

    Ele.addEventListener = function(){}  //addEventListener這個屬性是定義在當前元素EventTarget這個類得原型上

    重要：不單單把綁定的方法執行，並且瀏覽器還默默地給這個方法傳遞了一個參數值->mouseEvent(鼠標事件對象)，1：它是一個對象數據類型的值，裏面包含了不少的屬性名和屬性值，這些都是用來記錄當前鼠標的相關信息的，2：mouseEvent->UIEvent->Event->Object   原型，3：MouseEvent記錄的是頁面中惟一一個鼠標每次觸發時候的相關信息，和到底在那個元素上出發的沒有關係

二、關於事件對象MouseEvent的兼容問題

    1：事件對象自己的獲取存在兼容問題：標準瀏覽器是瀏覽器給方法傳遞的參數，咱們只須要定義形參e就能夠獲取到；可是在IE6~8中，瀏覽器不會傳遞參數，若是須要的話，須要到window.event中查找

    e = e || window.event  //兼容的寫法  e.c;ientX/e.clientY 當前鼠標觸發點距離左上角的座標值

    e.pageX/e.pageY：當前鼠標觸發點距離body左上角(頁面第一屏的最左上角)的x/y軸的座標，可是此屬性在IE6~8是沒有這個屬性，咱們經過使用clientY+滾動條捲去的高度也能夠 e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft))  e.pageY = e.pageY || (clientY + (document.documentElement.scrollTop || document.body.scrollTop))

     e.type：存儲的當前鼠標觸發的行爲類型"click"

    e.target  事件源，當前鼠標觸發的是哪一個元素，那麼它存儲的就是哪一個元素，可是在IE6~8不存在這個屬性(undefined)，用e.srcElement來獲取事件源

    e.target = e.target || e.srcElement  //兼容性處理

    e.preventDefault：阻止瀏覽器的默認行爲，在IE6~8中沒有這個方法，咱們須要使用e.returnValue=false 來代替

        e.preventDafault ? e.preventDefault() : e.returnValue=false      這樣寫和return false的效果是同樣的，都是阻止默認行爲

    e.stopPropagation：阻止事件的冒泡傳播，在IE6~8中不兼容，使用e.cancelBubble=true來代替

 

事件的傳播機制：

    事件的默認傳播機制

        捕獲事件：從外到內依次查找元素

        目標階段：當前事件源自己的操做

        冒泡階段：從內到外依次觸發相關的行爲(咱們最經常使用的就是冒泡階段)

    使用DOM0級事件綁定給元素的某一個行爲綁定的方法，都是在行爲出發後的冒泡階段把方法執行

    不一樣瀏覽器傳播的最頂層的位置是不同的，在谷歌瀏覽器中是能夠傳播到document的，在IE中只能傳播到HTML

addEventListener：第一個參數是行爲類型，第二個參數是給當前的行爲綁定方法，第三個參數是控制在哪一個階段發生：true 在捕獲階段發生，false 在冒泡階段發生

 

onmouseover和onmouseenter 都是鼠標進入的事件，可是onmouseenter不會發生事件的傳播，自動的阻止了事件的傳播，而onmouseover沒有這個功能，須要手動阻止事件的傳播