1，事件冒泡，捕獲，委託

早期的事件，是作為分擔伺服器運算負載的一種手段，實文件或者瀏覽器視窗中發生的一些特定的互動瞬間，如點選按鈕，拖放檔案等。我們可以使用偵聽器來預定事件，當事件釋出時候就可作出相應的響應，這種模式稱為觀察者模型。

事件流

事件流是從頁面接收事件的順序。在一個html頁面中，dom元素組成一顆dom樹，由於子元素一般所處的位置都會在父元素之中。那麼，當這個子元素被點選時候，可以認為子元素受到了點選，也可以認為父元素受到點選。那麼確定誰先接收這個點選事件就成了瀏覽器需要解決的問題。

事件冒泡

IE在處理上述事件時候，是由事件開始最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播到根節點。這就是事件冒泡。
[html]

view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>

test</title>
</head>
<body>
<div id="container"></div>
</body>
</html>

在如上程式碼裡面，如果單擊了div元素，那麼接著<body>、<html>、document會按著順序收到點選事件。

事件捕獲

Netscape Communicator團隊提出了一種與IE完全相反的一種解決辦法，接收事件的順序為根節點到具體的節點，這種方法就是事件捕獲。也就是在上面的這個例子中，接收點選事件的順序為document、<html>、<body>、<div>。

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段。首先發生的是事件捕獲，然後處於目標階段，最後才事件冒泡。依然以上面的程式碼為例子，單擊div時，首先document獲得點選事件，依次到<html>、<body>，之後事件捕獲結束。事件捕獲的意義在於，能夠在目標獲得點選事件之前截獲事件，並對其作出相應的處理。處於目標階段時，div能夠執行繫結的事件處理程式，之後再到事件冒泡階段。即使“DOM2級事件”規範明確規定捕獲階段不會涉及事件目標，但是瀏覽器基本都會實現在捕獲階段觸發事件物件上的事件，也就是說，可以在事件捕獲階段觸發事件物件的事件處理程式，這種情況通常都需要在繫結事件處理程式的情況下指明可在捕獲階段觸發。如果非必須，最好不要使用事件捕獲。

事件處理程式

HTML事件處理程式

dom元素一般都有支援事件的特性，例如onclick等，這個特性的值應該是能夠執行的JavaScript程式碼，這些JavaScript程式碼就是其事件處理程式，例如：
[html] view plain copy

<input type="button" value="click me" onclick="alert('click')" />

也可以呼叫在頁面其他地方定義的指令碼：
[html] view plain copy

<input type="button" value="click me" onclick="handler()">
<script>
function handler() {
alert('click');
}
</script>

在HTML頁面中指定事件處理程式有三個缺點：存在時差，當指令碼較綁定了事件dom元素慢，那麼使用者在指令碼沒有加載出來的過程就觸發事件會導致報錯；另一個缺點是這樣擴充套件事件處理程式的作用域鏈在不同的瀏覽器會導致不同的結果，即this的指向不一致；最後，這種緊密耦合的程式碼風格導致維護的成本升高，在以後修改程式碼的時候需要修改HTML程式碼和js程式碼。

DOM0級事件處理程式

通過JavaScript指定事件處理程式的傳統方式，就是將一個函式賦值給一個事件處理程式屬性。這種指定事件處理程式具有簡單，跨瀏覽器的優點，其事件處理程式會在事件流的冒泡階段被觸發：
[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<input id="myButton" type="button" value="click me">
<script>
var button = document.getElementById('myButton');
function handler() {
alert('click');
}
button.onclick = handler;
// 移除事件
// button.onclick = null;
</script>
</body>
</html>

注意，此種方式無法為同一個元素對同一事件指定多個事件處理程式，如果繫結多次，就會以最後一次為準。

DOM2級事件處理程式

DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程式的操作：addEventListener()和removeEventListener()。它們接受三個引數：處理的事件名稱，事件處理程式，一個指定是在事件冒泡還是事件捕獲階段處理的布林值，true則為在事件捕獲階段處理，false為在事件冒泡階段處理。需要注意的是，通過addEventListener()指定的事件處理程式智慧通過removeEventListener()移除；同時，如果在addEventListener()中的第二個引數是一個匿名函式，則無法通過removeEventListener()移除，也沒有辦法移除。而IE實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()，這兩個方法直接收兩個引數，第一個為事件名稱（注意事件名稱都有on字首，例如click事件則為onclick），第二個引數為事件處理程式函式。以下示例是相容了瀏覽器的事件繫結函式：
[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<input id="myButton" type="button" value="click me">
<script>
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
}
function removeHandler(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
}
var button = document.getElementById('myButton');
function handler() {
alert('click');
}
addHandler(button, 'click', handler);
// removeEventListener(button, 'click', handler);
</script>
</body>
相關推薦

前端知識點3

1，事件冒泡，捕獲，委託早期的事件，是作為分擔伺服器運算負載的一種手段，實文件或者瀏覽器視窗中發生的一些特定的互動瞬間，如點選按鈕，拖放檔案等。我們可以使用偵聽器來預定事件，當事件釋出時候就可作出相應的響應，這種模式稱為觀察者模型。事件流事件流是從頁面接收事件

js常見知識點3.面向對象之繼承、設計模式

環境設計方法 nbsp -- div 細節外部接口實現一、面向對象的三大特征　　建議回復：　　　封裝：屏蔽內部細節、調用外部接口實現對應功能(函數調用) 　　繼承：子類繼承父類中的屬性和方法　　多態（js中不存在多態的概念）二、繼承　　建議回復：　

前端知識點

js 知識點知識點： * ul li 中默認選擇 class="active" * $("#firstLi").removeClass("active");//去掉樣式 $("#fourthLi").addClass("active");//添加樣式 * 字體加粗： <b>李建波&l

java小知識點3

調用靜態編譯器 ted .cn sta 語義 ron 過程調用對象方法的執行過程：編譯器查看調用對象的類型和方法名編譯器查看調用方法時提供的參數類型如果是靜態綁定方法（private、static、final），編譯器可以直接確定下來虛擬機調用x實際對象最適

gcc 源代碼分析-前端篇3

com 初始一個語言 filename 名稱分析源碼 ng- 3. GCC怎樣函表示一個函數對c語言來說。函數是其核心，全部的東西都在環繞著函數在轉。對於一個函數來說。它基本的一些特性例如以下： 1. 有一個返回值，在這裏我們沒有把返回值的函數覺得

必背知識點-3

cisco 交換機路由器基礎交換深圳雲計算王森問題1、DHCP 的報文的發送方式是什麽？答案：廣播問題2、什麽是廣播域？答案：廣播的範圍。即一個網段，就是一個廣播域。問題3、DHCP的報文是否可以發送到其他的廣播域？答案：不可以。問題4、DHCP客戶

從零開始學習前端開發 — 3、CSS盒模型

左右 color 方法盒子模型圖片 enter das 設置方法 left ★ 盒子模型（標準的盒模型） css盒模型的概念及組成 css盒模型是css的基石，每個html標簽都可以看作是一個盒模型。 css盒模型是由內容(content)，補白或填充(paddi

從零開始學習前端開發 — 3、元素類型

元素自己決定 right htm inpu 有效 add float 一、元素類型分類 html元素可分為三大類：塊元素，內聯元素，可變元素 1.塊元素常見塊元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,fieldset

從零開始學習前端JAVASCRIPT — 3、JavaScript基礎string字符串介紹

con post ccf har 區分 nal ase star hid 1：字符串 JS中的任何數據類型都可以當作對象來看。所以string既是基本數據類型，又是對象。 2：聲明字符串基本數據類型：var sStr = ‘字符串’; 對象的方法：var oStr =

前端知識點總結

splay 禁止 pat foo 狀態欄顏色 -c box eight mage 前端知識點總結知識點一：DOCTYPE和瀏覽器渲染模式文檔類型，一個文檔類型標記是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用

前端（3）表格table

跳過合並 cap OS class 排版 head div pre 表格的標簽：table：一個表格區域thead：表頭區tbody：表內容區tfoot：表底區thead、tbody、tfoot的分區，用於方便區分，可以不寫 tr：一個表格行th：一個表頭格td：一個表內

前端知識點總結——VUE

周期響應 cookie index 通信方式 r12 插入 outer 轉載自：http://www.bslxx.com/m/view.php?aid=1799 1.框架和庫的區別：框架：framework 有著自己的語法特點、都有對應的各個模塊庫 library

軟件測試必備-前端知識點之css基礎及ps的用法

tro inf 軟件測試 blog gpo color 自己 ont 測量 CSS 一、 css定義 css樣式表、層疊樣式表，級聯樣式表二、 css基礎語法 1、寫style標簽，放在head標簽裏面的最後位置 2、自己寫的css代碼，放在style標簽

知識點3 shader_基礎紋理

逆矩陣變換要求視角位置頂點 under 正是方向在美術人員建模的時候，通常會在建模軟件中利用紋理展開技術把紋理映射坐標存儲在每個頂點上。紋理映射坐標定義了該頂點在紋理中對應的2D坐標。通常，這些坐標使用一個二維坐標（u，v）來表示，其中u是橫向坐標，而v是縱向

前端知識點總結——jQuery（下）

mda 服務器端 ont das 等待 .ajax AD 顏色 AS 1. 排隊和並發 1.並發: 多個css屬性同時變化放在一個animate函數內的多個css屬性默認並發變化 2.排隊: 多個css屬性先後變化對同一個元素，先後調用多個動畫API，都是排隊執行原理:

自己總結的前端知識點（vue部分）

路由編譯修改 com 轉化提取 red syn 動態路由 1.MVVM model-view-viewModel，model是數據與業務邏輯，view是UI界面，viewModel是一個對象用於實現model與view的同步。 ViewModel 通過雙向數據綁定把

專案中使用到的前端知識點

1 設定跳轉如果一個超連結,點選之後不做任何事情, <a href="javascript:void(0);"> <a href="javascript:void(0);"> 如果設定為 # ,如果有滾動條,會跳轉到頂部

前端知識點2

1.MVVM和MVC的區別一、MVC MVC模式的意思是，軟體可以分成三個部分。檢視（View）：使用者介面。控制器（Controller）：業務邏輯模型（Model）：資料儲存各部分之間的通訊方式如下。 View 傳

高階前端知識點

2018 大廠高階前端面試題彙總木易楊前端大全今天（給前端大全加星標，提升前端技能）作者：木易楊本人於7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感受到高階前端面試的套路。以下是自己整理的面試

Python全棧的知識點(3)

Python類: 1. 如果一類自己或基類中指定了metaclass，那麼該類就是由metaclass指定的type或mytype建立。 2. metaclass作用是指定當前類由誰來建立。 - 原始碼如果類以基類中未指定metaclass: - __

前端知識點3