JS事件小結1

1.事件流:描述的是從頁面接收事件的順序。

ie是事件冒泡流：事件開始時由最具體的元素接收，然後逐級向上傳播到不具體的節點。

safari，chrome，firefox，opera會將事件一直冒泡到window物件。

netscape是事件捕獲流 ：在事件到達預定目標之前捕獲它。

safari，chrome，firefox，opera支援這種事件流模型，從window物件開始捕獲事件。

dom2級事件：首先發生事件捕獲，為截獲事件提供了機會。然後是實際的目標接收到事件。最後是事件冒泡階段。

safari，chrome，firefox，opera會在捕獲階段觸發事件物件，結果會有兩個機會在目標物件上面操作事件

2.事件處理程式

html事件處理

dom0級事件處理

btn.onclick = function();//mybtn

dom0級方法指定的事件處理程式為元素方法。即程式中this指向當前btn元素。

dom2級事件處理

addeventlistener()

removeeventlistener()

兩者皆接收三個引數

要處理的事件名（不帶on）

作為事件處理的函式

boolean：true 在捕獲階段呼叫事件處理；false 在冒泡階段呼叫事件處理

移除事件時引數應與新增事件的引數一致，當使用匿名函式時無法移除事件。

var btn = document.getelementbyid("mybtn");

btn.addeventlistener("click", fun, false);
btn.removeeventlistener("click", fun, flase);
//這樣移除事件才有效，若是寫成匿名函式則無法移除

attachevent()

detachevent()

皆有兩個引數

事件處理程式名稱(帶on)

事件處理函式

移除事件時引數應與新增事件的引數一致，當使用匿名函式時無法移除事件。

可以為乙個元素新增多個事件，但是與dom2時間相反，事件按著新增順序的相反順序觸發。

事件處理程式在全域性作用域中進行：this=window

3.事件物件

dom中的事件物件

在事件處理程式內部，物件this始終等於currenttarget（其事件處理程式當前正在處理的那個元素），而target則只包含事件的實際目標。

處理多個事件時可以使用type屬性

阻止特定時間的預設行為，用preventdefault();

stoppropagation()立即停止事件在dom層次的傳播。

eventphase屬性可以用來確定事件當前處於事件流的哪個階段。捕獲=1；處於目標物件上=2；冒泡階段=3

ie中的事件物件

訪問ie中的event物件有幾種不同的方式，取決於指定事件處理程式的方法。

dom0級方法新增事件處理程式時，event作為window物件的的屬性。

若用attachevent()新增，則有乙個event物件作為引數被傳入到處理函式中。

var btn = document.getelementbyid("mybtn");

btn.attachevent("onclick", fucntion(event));

returnvalue屬性==preventdefault()方法，設定為false，就可以阻止預設行為。

cancelbubble屬性==stoppropagation()方法，不過只能取消事件冒泡，因為ie不支援捕獲事件。

JS事件小結2

4.事件型別 dom2規定了5種事件 ui事件 在使用者與頁面上的元素互動時觸發 滑鼠事件 當使用者通過滑鼠在頁面上執行操作時觸發 鍵盤事件 當使用者通過鍵盤在頁面上執行操作時觸發 html事件 當瀏覽器視窗發生變化或特定的c s互動時觸發 變動 當底層dom結構發生時觸發 滑鼠事件 觸發順序 mo...

JS事件模型小結

三種事件模型 原始事件模型 dom0 dom2事件模型，ie事件模型 不同點 事件程式的註冊 給html元素所對應的js物件繫結事件 事件傳播的過程 事件模型的註冊 一 原始事件模型 沒有相容性問題 原始事件模型的特點 事件型別上面有on onclick 沒有事件的傳播 事件一旦發生就立刻呼叫事件控...

js 事件物件的理解1

在觸發dom上的某個事件時，會產生乙個事件物件event。這個物件中包含著所有與事件有關的資訊。包括導致事件的元素，事件的型別以及其他與特定事件相關的資訊。所有瀏覽器都支援event物件，event物件會傳入dom0級，dom2級，html指定，的事件處理程式中，但支援的方式不同，所以也會涉及跨瀏覽...