Dom（六） 事件操作

事件操作

EventTarget

是一個可接收事件的對象接口，並且可以創建監聽器，例如window，document等這些是最常見的監聽目標

事件註冊

EventTarger.addEventListener(type,listener,useCapture)

• type：指的是創建事件的類型，例如，點擊事件click，鼠標移動事件mouseover等
• listener：回調函數，需要寫的函數
• userCapture：是否需要捕獲階段

事件註冊有通常有2種方式：

方法一：addEventListener

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.addEventListener('click',click,false);

方法二：直接添加點擊函數

            var a=document.getElementById('div');
            var click1=function(event){

            }
            a.οnclick=click1;

取消事件註冊

EventTarget.removeEventListener(type,listener,useCapture)

• type：指的是創建事件的類型，例如，點擊事件click，鼠標移動事件mouseover等
• listener：回調函數，需要寫的函數
• userCapture：是否需要捕獲階段

事件註冊有通常有2種方式：

方法一：removeEventListener

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.removeEventListener('click',click,false);

方法二：直接將點擊事件賦值爲null

            var a=document.getElementById('div');
            a.οnclick=null;

瀏覽器兼容

在IE6,7,8下，是沒有addEventLisener和removeEventListener，使用的是attchEvent和detachEvent，另外也沒有捕獲

 

事件對象

當事件被觸發的時候，傳遞個事件處理程序的那個對象，先看示例

            var a=document.getElementById('div');
            var click=function(event){

            }
            a.removeEventListener('click',click,false);

這裏函數中的參數event，就是事件對象，但是在處理的時候要做一個兼容event = event || window.event，因爲在IE6,7,8下event是掛在window對象下的

            var a=document.getElementById('div');
            var click=function(event){
                event = event || window.event
            }
            a.removeEventListener('click',click,false);

另外，這個事件對象還保存了一些狀態，例如，鼠標點擊事件後，event還保存了鼠標點擊位置的x,y座標，shift按鍵是否被按了

屬性

type：事件的類型，是點擊事件，還是鼠標事件，還是鍵盤事件等

target(srcElement，IE下還要帶上.srcElement)：指向的是點擊的元素到底是哪個，也就是目標元素

currentTarget：目前事件監聽的元素是哪個，當事件處於目標階段的時候，target和currentTarget纔是同一個元素

方法

stopPropagation：阻止冒泡

preventEefault：阻止默認行爲的方法

stoplimmediatePropagation：作用在當前節點以及事件鏈上的所有後續節點上，目的是在執行完當前事件處理程序之後，停止當前節點以及所有後續節點的事件處理程序的運行

阻止事件傳播

event.stopPropagation()

阻止事件傳播到父節點，也就是阻止冒泡行爲，在IE低版本下，得使用event.cancelBubble=true

event.stoplimmediatePropagation()

這個函數一是阻止了事件傳播到父節點，也就是冒泡行爲，二是還會阻止後續節點上的其他事件處理，例如，在一個event上綁定了10個click，如果第一個click的listener裏面使用了這個方法，那麼後續的9個click事件都不會在觸發了

阻止默認行爲

首先的得理解什麼是默認行爲，比如，有一些元素是有默認的效果的，例如<a>標籤，點擊a標籤會默認打開一個鏈接，這個打開鏈接的過程就是默認行爲

Event.preventDefault()

通過這個方法可以阻止事件的默認行爲，同樣在IE低版本下，得使用Event.returnValue=false