事件：可以被JavaScript偵測(cè)到的行為
    onClick         單擊事件
    onMouseOver     鼠標(biāo)經(jīng)過事件
    onMouseOut      鼠標(biāo)移出事件
    onChange        文本內(nèi)容改變事件
    onSelect        文本框選中事件
    onFocus         光標(biāo)聚集事件
    onBlur          移開光標(biāo)事件
    onLoad          網(wǎng)頁(yè)加載時(shí)間
    onUnload        關(guān)閉網(wǎng)頁(yè)事件

事件流
    描述的是頁(yè)面中接受事件的順序
    事件冒泡:由最具體的元素就收，然后逐級(jí)向上傳播至最不具體的元素的節(jié)點(diǎn)(文檔)
    事件捕獲:最不具體的節(jié)點(diǎn)先接收事件，而最具體的節(jié)點(diǎn)應(yīng)該是最后接收事件

事件處理
    1.HTML事件處理：
        直接添加到HTML結(jié)構(gòu)中
        <div id="div">
            <button id="btn1" onclick="demo()">按鈕</button>
        </div>
        <script>
            function demo(){
                alert("Hello html事件處理");
            }
        </script>
        弊端：修改時(shí)，需修改兩處

    2.DOM0級(jí)事件處理
        把一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?        <div id="div">
            <button id="btn1" onclick="demo()">按鈕</button>
        </div>
        <script>
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function (){alert("Hello DOM0級(jí)事件處理程序1")};//被覆蓋掉
            btn1.onclick = function (){alert("Hello DOM0級(jí)事件處理程序2")};
            btn1.onclick = function (){alert("Hello DOM0級(jí)事件處理程序3")};
            btn1.onclick = null;
        </script>
        弊端：事件1、2 會(huì)被3覆蓋掉

    3.DOM2級(jí)事件處理
        addEventListener("事件名","事件處理函數(shù)","布爾值")
        true:事件捕獲
        false:事件冒泡
        removeEventListener();
        <div id="div">
            <button id="btn1" onclick="demo()">按鈕</button>
        </div>
        <script>
            var btn1 = document.getElementById("btn1");
            btn1.addEventListener("click",demo1);            
            btn1.addEventListener("click",demo2);
            function demo1(){
                alert("Hello DOM2級(jí)事件處理程序1");
            }
            function demo2(){
                alert("Hello DOM2級(jí)事件處理程序2");
            }
            btn1.removeEventListener("click",demo1);
            btn1.removeEventListener("click",demo2);
        </script>
        事件1、2不會(huì)覆蓋，會(huì)依次出現(xiàn)

    4.IE事件處理程序      小于IE8
        attachEvent     添加事件
        detachEvent     移除事件
        <div id="div">
            <button id="btn1" onclick="demo()">按鈕</button>
        </div>
        <script>
            var btn1 = document.getElementById("btn1");
            if(btn1.addEventListener){
                btn1.addEventListener("click",demo);
            }else if(btn1.attachEvent){//IE
                btn1.attachEvent("onclick",demo);
            }else{
                btn1.onclick = demo();
            }
            function demo(){
                alert("Hello");
            }
        </script>