之前參加360前端實習生 星計劃時，遇到一個任務，就是利用H5 localStorage實現密碼的存入和獲取。當時還沒有學canvas 繪圖，感覺利用原生JS和CSS實現比較複雜；這次剛好看了JS高程的Canvas繪圖，所以正好可以理論與實踐結合一下，試著做了一下這個。當然，這只是一個初期的效果，後期還會再改善。

由於手勢繪製密碼，需要用到觸控事件的一些東西，所以我會在開頭先講一下JS的事件機制，希望大家能耐心看完！（* _ *）所以整篇部落格的目錄如下：

1. JS事件機制
2. Canvas繪圖原理
3. H5快取機制

JS事件機制

1. 事件流
   JS主要用於使用者和瀏覽器之間的互動，這種互動往往通過事件的方式來實現。而觸發頁面中的某個元素實質上也觸發了包含他的元素，這就類似於有很多同心圓，我們指向最裡面圓的圓心時，實際也指向了其他圓的圓心。而事件流就是指這些”同心圓”事件觸發的順序。
   現在主要有兩種事件流，一種是冒泡事件流（IE主打），另一種是捕獲事件流（網景公司主打）。
   為了直觀一些，我用下面的圖來表示各種事件流：
   

2. 事件處理程式
   學過計組的應該都知道，中斷的概念，每個中斷對應一箇中斷處理程式，這一點類似於我們的JS事件，每個事件也有一個事件處理程式，不過這是要我們去自定義的。在JS中，有四種事件處理程式。

一、 HTML事件處理程式
直接看程式碼吧

<button onclick = function(){ alert("HTML事件!"); }>點選之後觸發事件</button>

不難理解，這段程式碼在button 元素上綁定了一個事件，點選滑鼠就會觸發那個事件處理程式。
但這種方式的缺點主要是JS和HTML耦合性比較高，不利於後面的維護。
二、DOM 0級事件處理程式

<button id="btn">點選之後觸發事件</button>
<script>
    document.getElmentById("btn").onclick = function(){
        alert("DOM 0級事件!");
    }
</script>

這種方式是將事件處理程式繫結在對應的DOM物件上，該方式解決了HTML程式碼與JS耦合的問題，但是需要注意，在頁面未加載出來時，去訪問id 為btn的元素是會出錯的。不過沒關係，如下程式碼就可以解決

<script>
window.onload = function
 
(){
    document.getElmentById("btn").onclick = function(){
        alert("DOM 0級事件!");
    }
}
</script>

三、 DOM 2級事件處理程式
這種處理程式是通過兩個api註冊事件和刪除事件的：
addEventListener(eventName, handler, ifCapture); //註冊事件
removeEventListener(eventName, handler, ifCapture); //刪除事件

注意：刪除事件的handler必須與註冊事件中傳入的引數一致

var handler = function(){
    alert("DOM 2級事件處理程式");
}
document.getElmentById("btn").addEventListener('click', handler, false);      
//false表示不進行事件捕獲
//當不需要事件處理函式時，將其刪除掉   
//document.getElmentById("btn").removeEventListener('click', handler, false);  

四、 IE事件處理程式
IE 事件處理程式是針對IE瀏覽器的，並且只支援冒泡，不支援事件捕獲。
它也提供了兩個api來註冊事件處理程式和刪除事件處理程式，與DOM 2級不同的是：事件名這裡是on+事件名，比如：點選事件就是onclick。看下面程式碼就很明白了：

var handler = function(){
    alert("IE事件處理程式");
}
document.getElmentById("btn").attachEvent('onclick', handler);
//當不需要事件處理函式時，將其刪除掉   
//document.getElmentById("btn").detachEventL('onclick', handler); 

對於上面四種事件處理程式，有一個特別需要注意的一點：
只有IE事件處理程式的作用域是全域性作用域，也就是說this 指的是window物件；
其他DOM 事件處理程式的作用域就是相應元素；
我們可以做一個瀏覽器能力檢測從而使註冊事件處理程式得到好的相容性。
3. 事件物件
事件物件只在事件處理程式執行時才存在。
一、DOM 中的事件物件

相容DOM事件的瀏覽器在事件處理程式執行時都會傳入一個event物件。這個物件擁有一系列的屬性和方法：

這裡只列舉了常用的幾種屬性和方法，若要了解詳細的事件物件，可以在瀏覽器控制檯將事件物件輸出，可看到詳細的事件物件。

二、 IE中的事件物件
在IE 中的事件物件，根據指定事件處理程式的方式，IE 中的事件物件也不同。
如果採用DOM 0級方式指定事件處理程式，那麼event物件是window物件的一個屬性。

<button id="btn">點選之後觸發事件</button>
<script>
    document.getElmentById("btn").onclick = function(){
        vae e = window.event;
        console.log(e);
        alert("DOM 0級事件!");
    }
</script>

IE 中的事件物件同樣也有一系列屬性。（只有屬性）

4. 事件型別
常用的事件型別有這麼幾種：
UI事件：（如load事件，unload事件， scroll事件等不一定與使用者操作有關的事件）
焦點事件：（常常與表單元素等一類需獲取焦點的元素結合使用。focus，blur事件，這兩個不支援事件冒泡的事件；因此出現了focusin，focusout事件，DOMFocusIn， DOMFocusOut事件）
滑鼠事件：

還有很多滑鼠事件，這裡不再陳列，需要注意的一點是：只要涉及到滑鼠操作，在滑鼠事件物件中都有如下屬性：
clientX, clientY （這是當前觸發事件的滑鼠位置在瀏覽器視窗（視口）中的座標）
pageX, pageY（當前觸發事件的滑鼠位置在頁面中的座標，如果頁面沒有滾動的話，與clientX, clientY是一樣的）
screenX, screenY（當前觸發事件的滑鼠位置在整個顯示屏中的座標，也就是相對於桌面左上角點的相對座標）
鍵盤事件：
keydown: 按下任意鍵時觸發
keypress: 按下字元鍵時觸發
keyup: 鬆開鍵時觸發
與鍵盤事件相關的就是按下的鍵的值，也就是說keyCode 或 charCode。這也是包含在鍵盤事件物件中的。
HTML5事件：
這裡介紹與本次手勢解鎖相關的觸控事件：
根據觸控的種類，觸控事件也有以下這幾個：
touchstart: 開始觸控時觸發
touchend: 在觸控結束時觸發
touchmove: 在觸發移動過程中觸發。注意：在移動裝置上觸控移動時會預設觸發滾動事件，因此利用perventDefalut()將其預設行為取消。
每個觸發事件都對應的事件物件。對於touchstart和touchmove事件，事件物件中有一個touches陣列，這裡麵包括觸控的clientX,clientY，target等屬性資訊。這些對於實現手勢解鎖是很重要的資訊。

事件對於Web效能是有很大影響的，因為註冊的事件處理程式儲存在記憶體中；並且繫結事件處理函式一般都是要先訪問DOM節點的。
那麼在JS事件處理這塊如何去優化效能呢？
兩方面：

• 事件委託
  何為事件委託？
  如果一個元素內部很多個元素上都要繫結同一類事件處理函式，我們很容易想到每個元素都繫結一個事件處理函式就好了，但是這種情況在元素很多的時候對於效能是由很大影響的，因為你不僅要訪問每個元素，還要形成很多個事件連線，因此，我們採用事件委託的方式來繫結事件處理函式，即只給最外層元素上繫結這類事件，然後利用事件冒泡機制，當事件物件e.target為我們實際要觸發事件的元素物件時，再採取一系列操作。看下面的程式碼：

<ul id="saleType">
    <li>水果</li>
    <li>蔬菜</li>
    <li>書</li>
</ul>

<script>
    var ulEle = document.getElementById("saleType");
    var handler = function(e){
        if(e.target.innerText == "水果")
        {
            //賣水果的相應操作
        }
        else if(e.target.innerText == "蔬菜")
        {
            //賣蔬菜的相應處理
        }
        else if(e.target.innerText == "書")
        {
            //進行賣書的相應操作
        }
    }
    ulEle.addEventListener('click', handler, false);
</script>

• 移除事件處理函式
  每次繫結事件處理函式，就會有一個事件連線，，每有一個事件連線，意味著這個函式就有一個引用，但有些情況會造成事件連線還在，但是用不到這個事件連線了，導致函式永遠被引用而不能得到垃圾回收。所以，在確定不會再用的情況下，可以手動來移除事件處理函式。

<div id="container">
    <input id="btn" type="button" value="Button" />
</div>
<input id="btnChange" type="button" value="替換內容" />

<script>
window.onload = function(){
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        alert("按鈕被點選!");
    }
    var btnC = document.getElementById('btnChange');
    btnC.onclick = function(){
        //在此之前，應該先將id為btn的按鈕繫結的事件移除
        btn.onclick = null;
        document.getElementById("container").innerHTML = "<sapn>內容替換掉了</sapn>";
    }   
}
</script>

本次就先總結這麼多吧，下一節我會介紹canvas的原理以及與手勢解鎖實踐的關聯。