js的注册函数

js的注册函数

1. html方式注册

缺点：

1. html代码和js代码耦合在一起
2. 同一个事件函数类型，只能注册一个事件参数

    <button onclick="test('李四')">按钮1</button>
    <script>
        function test(name){
            console.log(name);
        }
    </script>

2. dom 0级注册

缺点：

• 同一个事件函数类型，只能注册一个事件处理函数，
• 同一类型事件处理函数，后面会覆盖前面

    <button id="btn">test</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            console.log("Hello");
        }
        btn.onclick = function(){
            console.log("World");
        }
     </script>

3. dom 2级注册

优点

• 同一个事件类型，可以同时注册多个事件处理函数，按照注册事件先后顺序执行

    <button id="btn">test</button>
    <script>
        var btn = document.getElementById("btn");
        var fn1 = function () {
            console.log("Hello!");
        }
        var fn2 = function () {
            console.log("World!");
        }
        btn.addEventListener("click", fn1, false);
        btn.addEventListener("click", fn2, false);
    </script>