JS事件和BOM和DOM

2021-09-23 20:41:48 字數 1909 閱讀 7209

4.事件流和事件模型

dom 事件流: 是指頁面接受事件的順序,即事件在元素節點與根節點之間特定的傳播順序,是該事件的傳播過程.

事件順序: 冒泡和捕獲其實都是事件流的不同表現

事件冒泡:即事件開始時由最具體的元素接受,然後逐級向上傳播到較為 不具體的節點(文件)。

事件冒泡順序:1、

2、 3、 4、document

事件捕獲:事件捕獲的思想是不太具體的節點應該更早 接收到事件,而最具體的節點應該最後接收到事件。

事件捕獲的用意在於在事件到達預定目標 之前捕獲它。

事件捕獲順序:1、document 2、 3、 4、

dom 事件流 :

「dom2 級事件」規定的事件流包括三個階段:

事件捕獲階段:首先發生的是事件捕獲階段,為截獲事件提供了機會。

處於目標階段:然後是實際的目標接收到事件。

事件冒泡 階段:最後乙個階段是冒泡階段,可以在這個階段對事件做出響應。

5. 事件處理程式

html 事件處理程式:某個元素支援的每種事件,都可以用乙個與相應事件處理程式同名的 html 特性來指定。

dom0 級事件處理程式 : 是將乙個函式賦值給乙個事件處理程式 屬性,只能為同乙個元素 的同乙個事件設定乙個處理程式(覆蓋)

dom2 級事件處理程式 :定義了兩個方法,用於處理指定和刪除事件處理程式的操作: addeventlistener()和 removeeventlistener()。所有 dom 節點都包含這兩個方法,並且 他們都接受 3 個引數:要處理的事件名、作為事件處理程式的函式和乙個布林值。最後這個布 爾值引數如果是 true,則表示在捕獲階段呼叫事件處理程式;如果是 false 則表示在冒泡階段 呼叫事件處理程式。

可以為同乙個元素的同乙個事件新增多個處理函式。還可刪除事件處理函式,注 意,在刪除的時候,不能刪除匿名處理函式。

dom:document object model 文件物件模型 ,dom 提供了用程式動態控制 html 介面

每個載入瀏覽器的 html 文件都會成為 document 物件。document 物件使我們可以從腳 本中對 html 頁面中的所有元素進行訪問。document 物件是 window 物件的一部分,可通過 window.document 屬性對其進行訪問。

一、節點

對於頁面中的元素,可以解析成以下幾種類 型的節點:

節點型別 html 內容 例如

文件節點 文件本身 整個文件 document

元素節點 所有的 html 元素 、、

屬性節點 html 元素內的屬性 id、href、name、class

文字節點 元素內的文字 hello

注釋節點 html 中的注釋

二、元素節點的操作

1. 獲取節點

在進行增、刪、改的操作時,都需要指定到乙個位置,或者找到乙個目標,此時我們就可 以通過 document 物件提供的方法,查詢、定位某個物件(也就是我們說的節點)。

注意:操作 dom 必須等節點初始化完畢後,才能執行。

處理方式兩種:

(1)把 script 呼叫標籤移到 html 末尾即可;

(2)使用 onload 事件來處理 js,等待 html 載入完畢再載入 onload 事件裡的 js

獲取方式如下: 方法 描述

getelementbyid() 根據 id 獲取 dom 物件,如果 id 重複,那麼以第乙個為準

getelementsbytagname() 根據標籤名獲取 dom 物件陣列

getelementsbyclassname() 根據樣式名獲取 dom 物件陣列

getelementsbyname() 根據 name屬性值獲取 dom 物件陣列,常用於多選獲取值

45 js操作DOM和bom操作

一 js中的dom和bom的基本操作 ecmascript 核心語法 bom browser object model 瀏覽器物件模型 操作瀏覽器 dom document object model 文件物件模型 操作標記語言標籤 bom物件 window 用來操控瀏覽器視窗 bom的核心 loca...

BOM和DOM的區別

首先,如果你來查這個問題了,證明你便是個熱愛學習的人,其次我也是。bom 瀏覽器物件模型,無過於是提供一系列的物件,便於我們進行瀏覽器的操作,所以bom的範疇很大。而dom其實算是bom瀏覽器下的乙個子物件,因為文件操作也屬於瀏覽器操作的範疇,因為文件操作過於 重要,所以單獨將dom拿過來進行了介紹...

js高程 dom 和 dom 事件處理標誌

dom pc js dom document.getelementbyid d1 style.csstext color red font size 13px w3c dom2 事件 var btn2 document.getelementbyid btn2 function handlers fu...