20170611-事件

stefan 發(fā)布于2019-08-21 11:44 / 2431人閱讀

摘要：焦點事件在元素失去焦點時觸發(fā)在元素獲得焦點時觸發(fā)鼠標(biāo)事件鍵盤與文本事件事件在瀏覽器頁面中，點擊鼠標(biāo)右鍵可以調(diào)出上下文菜單。事件用以表示何時應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認(rèn)的上下文菜單而提供自定義的菜單。

JavaScript與HTML之間的交互是通過事件實現(xiàn)的，事件，就是文檔或者瀏覽器窗口中發(fā)生的一些特定的交互瞬間。可以使用監(jiān)聽器(或者處理程序)來預(yù)定事件，以便事件發(fā)生時執(zhí)行相應(yīng)的代碼。

事件流

事件流描述的是從頁面中接受事件的順序

事件冒泡

IE的事件流叫做事件冒泡，即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接受，然后逐級向上傳播到較為不具體的節(jié)點

事件捕獲

Netscape的事件流叫做事件捕獲。事件捕獲的思想是不太具體的節(jié)點應(yīng)該更早接受到事件，而最具體的節(jié)點應(yīng)該最后接受到事件，其用意在于在事件到達(dá)預(yù)定目標(biāo)之前就捕獲它。

DOM事件流

DOM2級事件規(guī)定的事件流包括三個階段：事件捕獲階段、處于目標(biāo)階段，事件冒泡階段。

事件處理程序 HTML事件處理程序

DOM0 級事件處理程序

var btn = document.getElementById("myBtn")
btn.onclick = function(){
    alert("Clicked")
}

DOM2 級事件處理程序

var btn = document.getElementById("myBtn")
btn.addEventListener("click", function(){
    alert("Clicked")
}, false)

跨瀏覽器的事件處理程序

var EventUtil = {
    addHandler: function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type, handler, false)
        }else if(element.attachEvent) {
            element.attachEvent("on"+type, handler)
        }else {
            element["on"+type] = handler
        }
    },
    removeHandler: function(element, type, handler){
        if(element.removeEventListener){
            element.removeEventListener(type, handler, false)
        }else if(element.detachEvent){
            element.detachEvent("on"+type, handler)
        }else {
            element["on"+type] = null
        }
    }
}

事件對象 事件對象常用的一些屬性和方法

event.preventDefault():取消事件的默認(rèn)方法，例如取消a元素的點擊事件

event.stopPropagation(): 取消事件的進(jìn)一步捕獲或冒泡

event.target : 事件的目標(biāo)(觸發(fā)事件的真實目標(biāo))

事件類型 UI事件

load事件：當(dāng)頁面完全加載后再window上面觸發(fā)，當(dāng)所有框架都加載完畢后再框架集上觸發(fā)，當(dāng)圖像加載完畢時再元素上觸發(fā)

unload事件：當(dāng)頁面完全卸載后再window上觸發(fā)

select事件：當(dāng)用戶選擇文本框(input和textarea)中的一或多個字符時觸發(fā)

resize事件：當(dāng)窗口或者框架的大小變化時在window上面觸發(fā)

scroll事件：當(dāng)用戶滾動帶滾動條的元素中的內(nèi)容時，在該元素上觸發(fā)。

焦點事件

blur：在元素失去焦點時觸發(fā)

focus:在元素獲得焦點時觸發(fā)

鼠標(biāo)事件

click

dbclick

mousedown

mouseup

鍵盤與文本事件

keydown

keypress

keyup

...

contextmenu事件

在瀏覽器頁面中，點擊鼠標(biāo)右鍵可以調(diào)出上下文菜單。contextmenu事件用以表示何時應(yīng)該顯示上下文菜單，以便開發(fā)人員取消默認(rèn)的上下文菜單而提供自定義的菜單。

為某一元素設(shè)置contextmenu事件處理程序，在事件處理程序中調(diào)用event.preventDefault()方法，就可以在該元素上阻止上下文菜單的出現(xiàn)。

使整個頁面都阻止上下文菜單的出現(xiàn)

document.body.addEventListener("contextmenu", function(event){
    event.preventDefault()
})

事件委托事件代理

假設(shè)現(xiàn)在要處理多個具有并列關(guān)系元素的click事件，當(dāng)點擊這些元素中的任何一個元素，則事件一定會通過冒泡的方式，冒泡到他的上層的父節(jié)點元素然后一直冒到window，所以這個時候就可以在他的上層元素中添加事件處理程序，來統(tǒng)一處理這些事件，在處理的過程中可以通過獲取target來知道是點擊的哪個具體的元素。這種方式就稱之為事件委托。

在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運行性能，因為需要不斷的與dom節(jié)點進(jìn)行交互，會延長整個頁面的交互就緒時間，而使用事件委托則可以大大減少對dom節(jié)點的訪問

為每個子節(jié)點都添加事件處理程序，會造成內(nèi)存空間的浪費

新添加的子元素不需要添加被委托事件的處理程序