W3C對DOM2 0定義的標準事件

2022-02-14 03:51:24 字數 1665 閱讀 4928

dom2.0模型將事件處理流程分為三個階段:

一、事件捕獲階段,

二、事件目標階段,

三、事件起泡階段。

具體如圖(**於網路,侵刪)

事件捕獲:當某個元素觸發某個事件(如onclick),頂層物件document就會發出乙個事件流,隨著dom樹的節點向目標元素節點流去,直到到達事件真正發生的目標元素。在這個過程中,事件相應的監聽函式是不會被觸發的。

事件目標:當到達目標元素之後,執行目標元素該事件相應的處理函式。如果沒有繫結監聽函式,那就不執行。

事件起泡:從目標元素開始,往頂層元素傳播。途中如果有節點繫結了相應的事件處理函式,這些函式都會被一次觸發。如果想阻止事件起泡,可以使用e.stoppropagation()(firefox)或者e.cancelbubble=true(ie)來組織事件的冒泡傳播。

解釋:比方說:ul,li,p,a都繫結了乙個click事件,被點選後執行彈出自己的nodename

如果是捕獲模式下的繫結那彈出順序是:ul -> li -> p -> a.

如果是冒泡模式下的繫結那彈出順序是:a -> p -> li -> ul.

chrome和ff瀏覽器的事件模式是冒泡

ie瀏覽器的事件模式是捕獲

上邊介紹的是w3c裡的事件,

w3c標準中那個addeventlistener()函式,它裡面最後乙個引數false代表冒泡,true代表捕獲,這是什麼意思呢?因為w3c作為乙個標準,它選擇了乙個相對折中的方案去處理事件,也就是任何在w3c事件模型中發生的事件都先進入捕獲階段,然後在進入冒泡階段,保證乙個事件會經歷這兩個階段,以適應ie和其他非ie瀏覽器,這樣使用者可以根據需求選擇將事件註冊到哪乙個階段

**在這裡:

//這是js**

var ul = document.getelementbyid('ul');

var li = document.getelementbyid('li');

var p = document.getelementbyid('p');

var a= document.getelementbyid('a');

ul.addeventlistener('click',function

(e),

true

); li.addeventlistener('click',function

(e),

true

); p.addeventlistener('click',function

(e),

true

); a.addeventlistener('click',function

(e),

true);

這裡是執行結果:

捕獲:

冒泡:

W3C定義的盒模式

margin和padding用來隔開元素,margin是隔開元素與外邊,padding是隔開元素裡邊。例子h2 h2 元素四邊可以設定的屬性 margin top,margin right,margin bottom,margin left,padding top,padding right,pad...

對WEB標準以及W3C的理解與認識

web標準 不是某乙個標準,而是一系列標準的集合。網頁主要由三部分構成 結構 表現和行為。對應的標準也分三方面 結構化標準主要包括xhtml和xml,表現標準語言主要包括css,行為標準主要包括物件模型 如 w3c dom ecmascript等。這些標準大部分由 全球資訊網聯盟 外語縮寫 w3c ...

對WEB標準以及W3C的理解與認識

web標準簡單來說可以分為結構 表現和行為。其中結構主要是有html標籤組成。或許通俗點說,在頁面body裡面我們寫入的標籤都是為了頁面的結構。表現即指css樣式表,通過css可以是頁面的結構標籤更具美感。行為是指頁面和使用者具有一定的互動,同時頁面結構或者表現發生變化,主要是有js組成。web標準...