第十一章 js事件

事件繫結和事件冒泡

題目

知識點

事件繫結

通過addeventlistener(type, fn)進行事件繫結，下面為事件繫結函式簡單封裝

// 通用的事件繫結函式

function bindevent(elem, type, fn) 
const a = document.getelementbyid('link1')
bindevent(a, 'click', event => )

事件冒泡：基於dom樹形結構，事件會順著觸發元素向上冒泡。為父元素繫結事件，當觸發子元素時利用事件冒泡機制會觸發父元素繫結的事件。應用場景：事件**

// 通用的事件繫結函式

function bindevent(elem, type, fn) 
const body = document.body
// 為 body 繫結事件，當點選body的子元素的時候，會冒泡到body身上，因此會觸發body上面繫結的事件
bindevent(body, 'click', event => )
// 當點選p1的時候，p1 會冒泡到body上，通過 stoppropagation() 阻止冒泡
const p1 = document.getelementbyid('p1')
bindevent(p1, 'click', event => )

a1

a2a3
a4點選增加乙個 a 標籤

function bindevent(elem, type, selector, fn) 

elem.addeventlistener(type, event => else 
})}// 普通繫結 注意箭頭函式的this指向
const btn1 = document.getelementbyid('btn')
bindevent(btn1, 'click', function (event) )
// **繫結
const div1 = document.getelementbyid('div1')
bindevent(div1, 'click', 'a', function (event) )

事件捕獲，事件冒泡和事件**

事件捕獲和事件冒泡都是為了解決頁面中事件流(事件的執行順序)的問題。

click me

如上面的**，在事件捕獲下，如果點選p標籤，click 事件的順序應該是document->html->body->div->p

事件冒泡：事件會從最內層的元素開始發生，一直向上傳播，知道觸發document物件。

因此在事件冒泡下，p 元素發生 click 事件的順序為p->div->body->html->document

事件繫結：

js 通過addeventlistener繫結事件。addeventlistener的第三個引數就是為事件冒泡和事件捕獲準備的。

addeventlistener有三個引數：

element.addeventlistener(event, function, usecapture)

對於事件**來說，在事件捕獲或者事件冒泡階段處理並沒有明顯的優劣之分，但是由於事件冒泡的事件流模型被所有的主流瀏覽器相容，從相容性角度來說通常使用事件冒泡模型。

為什麼要使用事件**？事件**的原理：

demo

第十一章 事件

目錄 11.1 設計公開事件的型別 11.2 編譯器如何實現事件 11.3 設計偵聽事件的型別 11.4 顯示實現事件 定義了事件成員的型別允許型別 或型別的例項 通知其他物件發生了特定的事件。定義了事件成員的型別能提供以下功能 方法能登記它對事件的關注 方法能登出它對事件的關注 事件發生時，登記了...

modern c design 第十一章

本章介紹了經常遇到的雙分派的一種泛型解決方案。c 在語法上實現了單分派，即虛函式，通過動態機制選擇相應的函式。雙分派是形如fun object1 a,object2 b 根據a和b的實際型別動態自動分派乙個處理函式。最容易想到的方案，蠻幹法 寫一大堆過載函式.不過這種方法會有很強的依賴性。也提供了一...

第十一章3

第十一章 一 滾動元件 awt中的滾動元件包括scrollbar 滾動條 和滾動面板 scrollpane 兩種。1 滾動條scrollbar 在指定的取值範圍內快速選取某一值的功能。i.構造方法 public scrollbar int orientation,int value,int visi...