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

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

    <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>

    <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>