章概念: 事件、事件流、事件捕獲、事件冒泡、事件委托

事件: JavaScript 使我們有能力創建動態頁面。事件是可以被 JavaScript 偵測到的行為。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。比方說，我們可以在用戶點擊某按鈕時產生一個Click 事件來觸發某個函數。

事件舉例：

1、 鼠標事件

2、 頁面事件

3、 鍵盤事件

4、 表單中選取輸入框事件

事件流:指的是DOM事件流

DOM(文檔對象模型)結構是一個樹型結構，當一個HTML元素產生一個事件時，該事件會在元素節點與根結點之間的路徑傳播，路徑所經過的結點都會收到該事件，這個傳播過程可稱為DOM事件流。

事件捕獲：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)

事件冒泡：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。

事件委托：對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件

具體講解:

JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器來預訂事件，以便事件發生時執行相應的代碼。

事件流的起源：就是在瀏覽器發展到第四代的時候，瀏覽器開發團隊遇到一個問題：頁面的哪一部分會擁有某個特定的事件？要明白這個問題問的是什么，可以想象畫在一張紙上的一組同心圓。如果你把手指放在圓心上，那么你的手指指向的不是一個圓，而是紙上的所有圓。也就是說如果單擊了頁面的某個按鈕，同時也單擊了按鈕的容器元素，甚至單擊了整個頁面。不過呢，IE提出的是冒泡流，而網景提出的是捕獲流。

JS事件流原理圖如下：

由此可以知道

1、一個完整的JS事件流是從window開始，最后回到window的一個過程

2、事件流被分為三個階段(1~4)捕獲過程、(4~7)冒泡過程

DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸發DOM中的所有對象，從document對象開始，也在document對象結束。

DOM事件模型的最獨特的性質是，文本節點也觸發事件（在IE中不會）

1、 冒泡事件流

當事件在某一DOM元素被觸發時，例如用戶在客戶名字節點上點擊鼠標，事件將跟隨著該節點繼承自的各個父節點冒泡穿過整個的DOM節點層次，直到它遇到依附有該事件類型處理器的節點，此時，該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡，在遵從W3C標準的瀏覽器里可以通過調用事件對象上的stopPropagation()方法，在IE里可以通過設置事件對象的cancelBubble屬性為true。如果不停止事件的傳播，事件將一直通過DOM冒泡直至到達文檔根。

如果想創建一個捕捉事件，在支持W3C 事件模型的瀏覽器中，將addEventListener的第三個參數設為true就好了。例如：

ID為div1和div2的兩個元素都被委派了捕捉階段的事件處理函數，這樣：

當點擊#div1（紅色區域）時，應該會alert出”div1″

當點擊#div2（粉色區域）時，應該會先alert出”div1″，再alert出”div2″，因為在事件捕捉階段，事件是從根元素向下傳播的，#div1是#div2的父元素，自然綁定在#div1上的click事件也會先于#div2上的click事件被執行

1、 捕獲事件流

事件的處理將從DOM層次的根開始，而不是從觸發事件的目標元素開始，事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中，事件會被從文檔根到事件目標元素之間各個繼承派生的元素所捕獲，如果事件監聽器在被注冊時設置了useCapture屬性為true,那么它們可以被分派給這期間的任何元素以對事件做出處理；否則，事件會被接著傳遞給派生元素路徑上的下一元素，直至目標元素。事件到達目標元素后，它會接著通過DOM節點再進行冒泡。

事件冒泡流和事件捕獲流的區別，如下圖所示：

當我們給body、bigDiv和smallDiv這三個元素添加onclick事件時，如果鼠標點擊smallDiv,事件冒泡的執行順序會先觸發smallDiv的onclick事件處理程序，然后再按照順序執行bigDiv和body的事件處理程序。

如果鼠標點擊body元素，事件捕獲的執行順序會先觸發body的事件處理程序，然后在按照順序執行bidDiv和smallDiv的事件處理程序。

1、 事件委托

在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能。導致這一問題的原因是多方面的。首先，每個函數都是對象，都會占用內存；內存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導致的DOM訪問次數，會延遲整個頁面的交互就緒時間。對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。

看下面的代碼：

<ul id="color-list">

<li>red</li>

<li>yellow</li>

<li>blue</li>

<li>green</li>

<li>black</li>

<li>white</li>

</ul>

如果點擊頁面中的li元素，然后輸出li當中的顏色，我們通常會這樣寫:

varcolor_list = document.getElementById('color-list');

var colors = color_list.getElementsByTagName('li');

for(vari=0;i<colors.length;i++){

colors[i].addEventListener('click',showColor,false);

};

functionshowColor(e){

var x = e.target;

alert("The color is " + x.innerHTML);

};

利用事件流的特性，我們只綁定一個事件處理函數也可以完成：

varcolor_list = document.getElementById('color-list');

color_list.addEventListener('click',showColor,false);

functionshowColor(e){

var x = e.target;

if(x.nodeName.toLowerCase() === 'li'){

alert('The color is ' + x.innerHTML);

}

}

對于事件委托來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來說還是建議大家使用事件冒泡模型

事件委托還有一個好處就是添加進來的元素也能綁定事件

看下面的代碼

沒有使用事件委托，當點擊按鈕，添加一個li，然后點擊每一個li獲取其中的內容，那么新添加的li不能響應onclick事件，運行下面的代碼即可以得到結果：

<ul id="thl">

<li>001</li>

<li>002</li>

<li>003</li>

</ul>

<button onclick="fun()">touch</button>

響應按鈕的點擊事件創建li：

function fun(){

var node=document.createElement("li");

vartextnode=document.createTextNode("004");

node.appendChild(textnode);

document.getElementById("thl").appendChild(node);

}

為每一個li添加onclick事件，并獲取點擊的li的內容：

varthl= document.getElementById('thl');

varaLi = thl.getElementsByTagName('li');

for (vari = 0; i<aLi.length; i++) {

aLi[i].onclick = fn;

}

functionfn (){

console.log(this.innerHTML);

}

使用了事件委托，新添加的元素也能夠響應onclick事件：

點擊按鈕添加新元素

function fun(){

var node=document.createElement("li");

vartextnode=document.createTextNode("004");

node.appendChild(textnode);

document.getElementById("thl").appendChild(node);

}

使用事件委托為li的父元素添加onclick事件

varthl= document.getElementById('thl');

thl.onclick = function(ev) {

ev = ev || event;

var target = ev.target || ev.srcElement;

if (target.nodeName.toLowerCase() == 'li') {

console.log(target.innerHTML);

}

};

(文章轉載自“扣丁學堂”公眾號）

lt;canvas> 標簽定義圖形，比如圖表和其他圖像，你必須使用腳本來繪制圖形。

比如在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

什么是 canvas?

HTML5 <canvas> 元素用于圖形的繪制，通過腳本 (通常是JavaScript)來完成.

<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。

你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。

創建一個畫布（Canvas）

一個畫布在網頁中是一個矩形框，通過 <canvas> 元素來繪制。

注意: 默認情況下 <canvas> 元素沒有邊框和內容。

<canvas>簡單實例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 標簽通常需要指定一個id屬性 (腳本中經常引用), width 和 height 屬性定義的畫布的大小。

提示:你可以在HTML頁面中使用多個 <canvas> 元素.

1.使用 style 屬性來添加邊框:

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

2.使用 JavaScript 來繪制圖像

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

實例解析:

3.首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

4.然后，創建 context 對象：

var ctx=c.getContext("2d");

getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪制一個紅色的矩形：

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。

Canvas 坐標

canvas 是一個二維網格。

canvas 的左上角坐標為 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。

坐標實例

如下圖所示，畫布的 X 和 Y 坐標用于在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位坐標。

Canvas - 路徑

在Canvas上畫線，我們將使用以下兩種方法：

moveTo(x,y) 定義線條開始坐標

lineTo(x,y) 定義線條結束坐標

繪制線條我們必須使用到 "ink" 的方法，就像stroke().

定義開始坐標(0,0), 和結束坐標 (200,100)。然后使用 stroke() 方法來繪制線條:

Canvas - 文本

使用 canvas 繪制文本，重要的屬性和方法如下：

font - 定義字體

fillText(text,x,y) - 在 canvas 上繪制實心的文本

strokeText(text,x,y) - 在 canvas 上繪制空心的文本

使用 fillText():

使用 "Arial" 字體在畫布上繪制一個高 30px 的文字（實心）：

JavaScript:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

大家有沒有學會呢？沒學會的話記得私信小編"011"哦~