2-44鍾靜雯_day08

Day08作業 JavaScript瀏覽器程式設計
作業01 事件委託建立li元素

• C
• AI
• Java
• Python

新增   知識點總結（JavaScript瀏覽器程式設計） DOM 動態建立標記

方法 語法
建立元素 document.createElement(‘元素名’)
建立文字節點 document.createTextNode(‘文字節點的內容’)
新增子節點 appendChild(‘要新增的子節點’)，返回追加的節點物件
插入子節點 insertBefore(新節點，要插入到它之前的節點)
刪除子節點 removeChild(刪除的子節點)
替換子元素 replaceChild(新子節點, 老子節點)
克隆節點 cloneNode()——深度複製(true)、淺度複製(false)
合併相鄰的文字節點並刪除空的文字節點 normalize()
插入節點:(到父節點的子節點的位置)

最後或最開始(只適用於元素節點)

父節點.append():在父節點的最後一個子節點之後插入一組Node物件或DOMString物件。

父節點.prepend():在父節點ParentNode第一個後代前插入一組Node物件或者DOMString物件。

中間(適用於元素節點和文字節點)

子節點.before(要插入的節點):在子節點之前插入節點。

子節點.after(要插入的節點):在子節點之後插入節點。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 刪除節點:

子節點.remove()，把子節點從它所屬的DOM樹中刪除。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 14 替換節點:

子節點.replaceWith()，用一套Node物件或者DOMString物件，替換了該節點父節點下的子節點。

• Java
• JavaScript
• Python

1 2 3 4 5 6 7 8 9 10 11 12 13 操作CSS 操作行內樣式

設定元素的 class 屬性(最簡單的方式)

先設定好class樣式選擇器。

然後通過classList.add()、classList.remove()、classList.toggle()切換。

請在這裡輸入電話號碼 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 通過元素節點的style屬性物件(行內樣式)

style物件的屬性與CSS規則一一對應，但是CSS屬性的名字可能要改寫。

去掉橫槓，橫槓後第一個字母大寫。

如果屬性名是JS保留字，屬性名前面就必須加上字串CSS(cssFloat)。

設定時必須包含單位。

• JavaScript高階程式設計
• JavaScript權威指南

1 2 3 4 5 6 7 8 9 10 11 操作非行內樣式

window.getComputedStyle():返回一個物件，包含所有計算值。

獲得的值是隻讀的絕對值。

簡寫屬性得不到。

cssText為undefined。

1 2 3 4 5 6 7 8 9 10 事件 事件驅動程式設計三要素 事件型別:一個字串，指定發生的事件型別。

如:“click”, “dblclick”，“mouseover”，“mouseup”, “keydown”, “keyup”…

兩種型別

瀏覽器事件:預定義的內建事件,瀏覽器自動觸發。

合成事件:程式設計師自定義的事件,自己定義、自己觸發。

事件目標:這是發生事件或與事件關聯的物件。

事件處理程式或者事件監聽器:一個函式，用於處理或響應事件。

註冊事件處理程式:

1.在目標物件上設定事件處理程式屬性。

click me 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 2.在目標HTML文件元素上設定事件處理程式屬性。(不推薦使用!) click me2 1 2 3 3.目標物件.addEventListener(‘事件型別’, 事件處理程式, {})。

​ 第一個引數:事件型別。事件型別（或名稱）是一個字串，不包括設定事件處理程式屬性時使用的on字首。

​ 第二個引數:事件處理程式，即在發生指定型別的事件時應呼叫的函式(箭頭函式、函式宣告、函式表示式等)。

​ 第三個引數:布林值、物件。

​ 布林值:true表示在捕獲階段呼叫事件處理程式，false（預設值）表示在冒泡階段呼叫事件處理程式。

​ 物件:{ }
​ capture:設定該事件是否在捕獲階段觸發監聽函式（預設為false）。
​ once:設定監聽函式是否只觸發一次，然後就自動移除（預設為false）。
​ passive:設定監聽函式不會呼叫事件的preventDefault方法（預設為false）。

click me 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 4.removeEventListener(事件型別，事件處理程式，{}):解除事件繫結

注意:必須與addEventListener的引數完全一樣,否則不起作用。

事件驅動程式設計步驟
獲取事件目標。

在事件目標上為指定事件型別註冊事件處理程式。

瀏覽器監聽事件目標上的事件。

當事件目標上發生指定型別的事件時，瀏覽器將呼叫處理程式函式。

click

<script>
    // 為按鈕新增click事件
    // 1.獲取事件目標
    const oButton = document.querySelector('button');
    // 函式宣告
    function callback() {
        console.log('Hello,Event');
    }
    // or
    // 函式表示式 回撥函式
    const callback = function() {
        console.log('Hello,Event');
    }
    //註冊事件處理程式:同一事件addEventListener可以繫結多個事件處理程式
    oButton.addEventListener('click',callback);
    oButton.addEventListener('click',()=>{
        console.log('hello,event1');
    },true)
</script>

事件傳播機制 1.事件傳播:確定在哪些物件上觸發事件處理程式。

2.事件流:描述了頁面接收事件的順序，分三個階段:（先捕獲，再冒泡）

捕獲階段:從根元素開始(Window->Document)，向下傳播到觸發事件的元素。
到達目標階段。
冒泡階段:從觸發事件的元素開始，向上傳播到根元素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 Event物件 事件發生時的一個快照：所有相關資訊(環境等)都被收集到 Event 物件中。 只有事件發生時，該物件才會存在；事件不發生時，該物件不存在。 作為事件處理程式的一個引數，隱式傳遞。 1 2 3 4 5 6 7 8 9 10 Event物件建立自定義事件(合成事件) Event物件本身就是一個建構函式，可以用來生成新的例項。

event = new Event(type, options);
1
第一個引數type是字串，表示事件的名稱；
第二個引數options是一個物件，表示事件物件的配置。該物件主要有下面兩個屬性:
bubbles：布林值，可選，預設為false，表示事件物件是否冒泡（預設是不冒泡！）。
cancelable：布林值，可選，預設為false，表示事件是否可以被取消，即能否用Event.preventDefault()取消這個事件。一旦事件被取消，就好像從來沒有發生過，不會觸發瀏覽器對該事件的預設行為。
步驟

建立自定義事件：自定義事件物件 = new Event(‘自定義事件型別字串’, options)。
繫結到目標：事件目標.addEventListener(‘自定義事件型別的字串’, 事件程式程式，options)。
分派事件：事件目標.dispatchEvent(自定義事件物件)。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Event物件的方法—阻止事件的預設行為 preventDefault()：用於阻止特定事件的預設動作，相當於在事件處理程式中：return false;

常見用法：表單校驗中，如果表單欄位校驗失敗，就阻止表單的提交。

Microsoft HomePage stopPropagation()：用於取消所有後續事件捕獲或事件冒泡。 stopImmediatePropagation()：用於取消所有後續事件捕獲或事件冒泡，並阻止呼叫任何後續事件處理程式，適用於繫結了多個事件處理程式。