JavaScript中的事件

事件

---

• 事件流

  • 概念：當一個標籤觸發事件之後，從這個標籤沿着一個方向傳遞，這就叫事件流。是瀏覽器處理事件的方法。

  • 分類：

    • 冒泡（從下到上）（IE只支持）
    • 捕獲（從上到下） （網景）
    • DOM事件流—DOM瀏覽器 (先捕獲，後冒泡)（默認冒泡）（若是兩種方法都存在，最後順序由代碼決定）

• 事件處理方法

  • 內嵌事件
    儘可能避免使用內嵌事件

  • DOM0級事件 

    • 優勢：兼容各個瀏覽器
    • 缺點：只能爲一個事件添加一個處理方法
    • 添加、刪除，能夠用null覆蓋事件

  • DOM2級事件

    • addEventListener (dom瀏覽器)

      addEventListener（"click"，function（）{}，true表明捕獲/false表明冒泡）//三個參數

      • 缺點：兼容有問題
      • 優勢：能爲一個事件添加多個處理方法
      • 刪除：removeEventListener 注意三個參數必須同樣，特別注意函數名

    • attachEvent （IE瀏覽器）

      • 刪除：tetachEvent（）兩個參數，除去第三個

• 事件類型

  • 鼠標
    • mouse
    • over out 還會執行 裏面有子元素
    • enter leave 子元素沒有影響

  • 鍵盤

    • key -down 一直按着
    • up 彈起執行
    • 按下彈起執行

  • 其餘 

    • onscroll

• 事件對象（Event）

  • dom瀏覽器

    • 獲取方法 ：函數裏傳入一個e
    • clientX clientY //鼠標相對於瀏覽器
    • screenX screenY //鼠標相對於窗口

  • IE 

    • e =window.event || e ； 作兼容

  • 屬性

    • onkeydown 鍵值，不分大小寫
    • onkeyup
    • onkeypress 字符碼
    • keyCode （經常使用）
    • charCode
    • which

  • 阻止事件的默認行爲（方法）

    • e.preventDefault（）；（dom）
    • e.returnValue=false； （IE）

  • 阻止事件冒泡

    • e.stopProopagation//DOM
    • e.cancelBubble=true；//IE

• 技巧

  • border-collapse：collapse；
  • border-spaceing：0；
  • 還原顏色 ""
  • parseInt（moveDiv.style.left || 0）； //常見的數初始化技巧

• 事件委託

  • 子元素不處理，父元素來處理事件。