国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM事件模型淺析

banana_pi / 2249人閱讀

摘要：事件發生后，對象可能會作出響應，也有可能無動于衷。事件模型在講解事件模型前，再用一個例子作為引入。當一個事件發生時，事件會在樹中進行傳播。冒泡階段在此階段，事件從事件源開始向上傳播，直到根結點。

1.何為DOM

DOM是“Document Object Model”的縮寫，中文譯為“文檔對象模型”。它是一種跨平臺、跨語言的編程接口，將HTML，XHTML，XML文檔映射成樹形結構，樹的每一個節點都是一個對象。正因如此，面向對象的編程語言（如javascript）可以通過DOM對HTML，XHTML，XML文檔進行操作。對于HTML文檔來說，它的根結點為document對象，HTML元素為element對象，HTML元素的屬性為attr對象。

2.何為DOM事件及如何對其作出響應

在瀏覽網頁時，我們常常需要頁面對用戶的操作作出響應，比如點擊“閱讀全文”后我們期望頁面展示被折疊的文本，按下回車鍵后瀏覽器提交已填好的表單。用戶的各種操作都是“事件”。事件都是在對象上發生的，可能是DOM對象、BOM對象，等等。事件發生后，對象可能會作出響應，也有可能“無動于衷”。我們希望DOM元素對事件作出響應，一般而言有兩種方法：
i.事件屬性
事件屬性是一種特殊的屬性，它的值規定了對應事件發生時需要執行的javascript腳本。例：

上面為button標簽添加了事件屬性onclick，其值為"console.log("button clicked!")"，它規定了當元素被鼠標點擊時，控制臺輸出"button clicked"。
ii.addEventListener()方法
EventTarget.addEventListener()方法將指定的監聽器注冊到EventTarget上，當該對象觸發指定的事件時，指定的回調函數就會被執行。EventTarget可以是element對象,document對象或者任何其他支持事件的對象。例：



//腳本中
var mybutton=document.getElementById("mybutton");
mybutton.addEventListener("click",function(e){console.log("button clicked!");});

上例為button元素注冊了click事件的監聽器，并規定事件時觸發控制臺輸出"button clicked"。

3.DOM事件模型

在講解DOM事件模型前，再用一個例子作為引入。請看下面的html文件：




    
    DOM Event Model

這里為id分別為outer,inner1,inner2,core的4個元素定義了事件屬性，元素被點擊后將在控制臺輸出它的id。現在問題來了：
如果我點擊core元素，控制臺將會輸出什么？
點擊core元素時，由于core元素包含在inner2元素里，inner2元素同樣被點擊了;同理，inner2元素包含在outer元素里，那么outer元素也被點擊了。這種情況下哪一個元素的click事件將會被觸發,或者說三者都被觸發？如果說三者都被觸發，那么又是以怎樣的順序被觸發？
我在火狐瀏覽器做了一次實驗，控制臺輸出結果如下：

core
inner2
outer

也就是說，三者的事件都被觸發了，且是“由內向外”觸發的。
下面我們再做一個有趣的實驗：我們將上面的html文件再做一個小小的改動，將core元素的樣式

left: 50px;

改為

left: -250px;

此時觀察頁面我們會發現，盡量core是inner2的子節點，但由于我們定義了“怪異”的樣式，它跑到了inner1里面。現在我們再次用鼠標點擊core，觀察控制臺的輸出：

core
inner2
outer

和剛才的結果一模一樣！盡管表面上inner1似乎被點擊了，但它的click事件并沒有觸發;反而是看似未被點擊的inner2元素的click事件被觸發了。仿佛core元素的click事件被觸發后，click事件一層一層向上“傳播”給了父節點。
為了解釋剛才的實驗結果，是時候開始講解DOM事件模型了。
當一個事件發生時，事件會在DOM樹中進行傳播。傳播分為兩個階段：
i.捕獲階段
在此階段，事件從根結點（即document結點）開始向下傳播，直到事件源所在元素。
ii.冒泡階段
在此階段，事件從事件源開始向上傳播，直到根結點。
拿剛才的例子來說，事件傳播的順序為：
document捕獲->html捕獲->body捕獲->outer捕獲->inner2捕獲->core捕獲->core冒泡->inner2冒泡->outer冒泡->html冒泡->document冒泡
對于事件屬性，默認在冒泡階段觸發事件。如果用addEventListener()方法注冊監聽器，則可以指定在捕獲階段還是冒泡階段觸發事件：如果最后一個參數為false（默認值），則在冒泡階段觸發事件;如果為true，則在捕獲階段觸發事件。
一般來說，我們推薦采用addEventListener()方法來注冊監聽器，而盡量不用事件屬性。因為事件屬性不利于行為與結構的分離，使代碼難以維護。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53112.html

相關文章

  • DOM事件模型淺析

    摘要：事件發生后，對象可能會作出響應，也有可能無動于衷。事件模型在講解事件模型前，再用一個例子作為引入。當一個事件發生時，事件會在樹中進行傳播。冒泡階段在此階段，事件從事件源開始向上傳播，直到根結點。 1.何為DOM DOM是Document Object Model的縮寫，中文譯為文檔對象模型。它是一種跨平臺、跨語言的編程接口，將HTML，XHTML，XML文檔映射成樹形結構，樹的每一個節...

    rubyshen 評論0 收藏0

  • 淺析SAX,DOM,JAXP,JDOM與DOM4J之間的關系

    摘要：通過解析器獲取文檔對象后，開發人員可以很方便的對其進行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認使用隨包一起發行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿 眾所周知，SAX與DOM是JAVA中兩大核心X...

    妤鋒シ 評論0 收藏0

  • 淺析SAX,DOM,JAXP,JDOM與DOM4J之間的關系

    摘要：通過解析器獲取文檔對象后，開發人員可以很方便的對其進行操作，如獲取更元素，獲取一個子元素，增加子元素，移除子元素。它并沒有為解析提供任何新功能，但是它為在獲取與解析器提供了更加直接的途徑。自身不包含解析器，默認使用隨包一起發行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初發表于我的個人博客非典型性程序猿...

    JasinYip 評論0 收藏0

  • 淺析 web 前端 MVVM

    摘要：它由微軟架構師和開發，通過利用微軟圖形系統和的互聯網應用派生品的特性來簡化用戶界面的事件驅動程序設計。微軟的和架構師之一于年在他的博客上發表了。更改時會得到提醒這個情況是一個單向流。 前言 記得四個月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質是什么。我大腦一片混亂，那時我對 MVVM 的認知就只是雙向綁定和Vue，以這個關鍵字簡單回答了幾句，我反問 MVVM 的本質是...

    VincentFF 評論0 收藏0

  • webkit渲染機制淺析

    摘要：模塊和將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。進行網頁的渲染進程，可能有多個。最后進程將結果由線程傳遞給進程最后，進程接收到結果并將結果繪制出來。 這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術內幕-朱永盛是我大四買的書，很舊的一本書了，當時只看了一點點，一直沒繼續看完它，現在才看完，，，說來慚愧...

    Cobub 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<