JS—事件

事件流：描述的是在页面接受事件的顺序

&事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）

&事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

***********************

HTML事件处理：
　　直接添加到HTML结构中

    <button id="btn" onclick="demo()">按钮</button>
    <script>
        function demo() {//函数名一旦改变，则需要改动两处
            alert("html事件处理");
        }
    </script>

DOM0级事件处理
　　把一个函数赋值给一个事件处理程序属性

    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            alert("DOM0级事件处理");
        }
        btn.onclick = function() {
            alert("原事件被覆盖了！！");
            //DOM0级事件处理的缺点：存在多个事件，则最后一个事件会覆盖之前的事件
        }
        //btn.onclick=null;//清除事件
    </script>

DOM2级事件处理：
　　addEventListener("事件名"，“事件处理函数”,"布尔值");
　　true：事件捕获
　　false：事件冒泡
　　removeEventListener();

    <button id="btn">按钮</button>
    <script>
        /* document.getElementById("btn").addEventListener("click", function() {
            alert("DOM2级事件处理程序");
        });
        document.getElementById("btn").addEventListener("click", demo);
        function demo() {
            alert("DOM2级事件处理程序");
        } */
        document.getElementById("btn").addEventListener("click", demo);
        function demo() {
            alert("DOM2级事件处理程序");
        }
        document.getElementById("btn").addEventListener("click", demo1);
        function demo1() {
            alert("DOM2级事件处理程序1");//优点：事件不会被覆盖~
        }    
    </script>

@@@一个小的恶作剧：

    <button id="btn">按钮</button>
    <script>
        document.getElementById("btn").addEventListener("click", demo);
        function demo() {
            for ( var i = 0; i < 10000; i++) {
                alert("DOM2级事件处理程序");
            }
        }
    </script>

IE事件处理程序:
　　attachEvent【相当于addEventListener】
　　detachEvent【相当于removeEventListener】

兼容性处理有关：

 

    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        if (btn.addEventListener) {
            btn.addEventListener("click", demo);
        } else if (btn.attachEvent) {
            btn.attachEvent("onclick", demo);
        } else {
            btn.onclick = demo();
        }
        function demo() {
            alert("hello");
        }
    </script>