EVENT事件

    一、事件驅動要素：
        
        一、事件源：觸發事件的元素；
    
        二、事件：被JS偵測到的行爲；

        三、事件處理函數（事件句柄/事件監聽器）：事件發生時進行的操做；

    二、事件分類：

        鼠標事件、鍵盤事件、表單事件、頁面事件

    三、事件綁定：

        一、在JS腳本中綁定事件：

        例：html:<input type="button" id="btn" value="點我"/>

            javaScript:var btn = document.getElementById("btn");

        方式一：btn.onclick = function(){}

        方式二：function test(){
                console.log(123);
            }
                btn.onclick = test;

        二、不推薦使用：標籤中綁定事件：
            
            <input type = "button" id ="btn" value="點我" onclick = "test()">

        三、監聽器：

    IE：添加：element.attachEvent(event,function);
        刪除：element.detachEvent(event,function);

    CHROM/FIREFOX：

        添加：element.addEventListener(event,funtion,useCapture);
        刪除：element.removeEventListener(event,function,useCapture);

    四、事件對象：

        一、事件源對象：是指event對象，封裝了與事件相關的詳細信息

            ·當事件發生時，只能在事件函數內部訪問的對象；
            ·處理函數結束後會自動銷燬。

        二、獲取EVENT對象：

        IE：window.event
        W3C:e

        三、EVENT對象的屬性：
    
            一、鼠標事件：

    ·相對於瀏覽器位置：
        event.clientX:事件觸發時，鼠標指針向對於瀏覽器頁面（客戶區）的水平座標；
        event.clientY:事件觸發時，鼠標指針向對於瀏覽器頁面（客戶區）的垂直座標；

    ·相對於屏幕的位置：
        event.screenX:相對於屏幕的水平座標；
        event.screenY:相對於屏幕的垂直座標；

    ·相對於事件源的位置：
        event.offsetX:相對於事件源的水平座標；
        event.offsetY:相對於事件源的垂直座標；

        event.layerX:相對於事件源的水平座標；(FIREFOX)
        event.layerY:相對於事件源的垂直座標；(FIREFOX)

            二、鍵盤事件：
            
                keyCode:獲取按下的鍵盤按鍵的值的字符代碼；
                altKey:指示在事件發生時，Alt鍵是否被按下；
                ctrlKey:指示在事件發生時，Ctrl鍵是否被按下；
                shiftKey:指示在事件發生時，Shift鍵是否被按下；

            三、type屬性：用來檢測事件類型

    五、事件流：
        當頁面元素觸發事件時，該元素的容器和整個頁面都會按照特定的順序響應該元素的觸發事件，事件傳播的順序叫作：事件流。

        一、事件流的分類：
            
            一、冒泡型事件：由明確的事件源向不明確的事件源依次向上觸發。

            二、捕獲型事件：（IE不支持）不明確事件源嚮明確的事件源依次向下觸發。
        
            3.DOM標準的事件模型：

            DOM標準同時支持捕獲型和冒泡型，可是捕獲型事件先發生。

        二、阻止事件流：

            IE：event.cancleBubble = true;
            FF: event.stopPropagation();

        三、目標事件源：
    
            IE：srcElement;
            FF：target;

        四、阻止默認事件：

            event.preventDefault()