JS事件

事件：可以被JavaScript侦测到的行为
    onClick         单击事件
    onMouseOver     鼠标经过事件
    onMouseOut      鼠标移出事件
    onChange        文本内容改变事件
    onSelect        文本框选中事件
    onFocus         光标聚集事件
    onBlur          移开光标事件
    onLoad          网页加载时间
    onUnload        关闭网页事件

事件流
    描述的是页面中接受事件的顺序
    事件冒泡:由最具体的元素就收，然后逐级向上传播至最不具体的元素的节点(文档)
    事件捕获:最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

事件处理
    1.HTML事件处理：
        直接添加到HTML结构中
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            function demo(){
                alert("Hello html事件处理");
            }
        </script>
        弊端：修改时，需修改两处

    2.DOM0级事件处理
        把一个函数赋值给一个事件处理程序属性
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function (){alert("Hello DOM0级事件处理程序1")};//被覆盖掉
            btn1.onclick = function (){alert("Hello DOM0级事件处理程序2")};
            btn1.onclick = function (){alert("Hello DOM0级事件处理程序3")};
            btn1.onclick = null;
        </script>
        弊端：事件1、2 会被3覆盖掉

    3.DOM2级事件处理
        addEventListener("事件名","事件处理函数","布尔值")
        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级事件处理程序1");
            }
            function demo2(){
                alert("Hello DOM2级事件处理程序2");
            }
            btn1.removeEventListener("click",demo1);
            btn1.removeEventListener("click",demo2);
        </script>
        事件1、2不会覆盖，会依次出现

    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>