js事件绑定的几种方式

在DOM元素中直接绑定

　　<a href="#" id="btn1" onclick="hello()">点击按钮</a>
　　<script>
    　　function hello() {
        　　alert('hello world');
    　　}
　　</script>

在JavaScript代码中绑定

使JS代码与hrml标签分离，文档结构清晰，便于开发和管理

    <a href="#" id="btn1">点击按钮</a>
    <script>
        document.getElementById('btn1').onclick = function () {
            alert('hello world');
        }
    </script>

使用事件监听绑定及移出

（1）IE标准（IE8及其以下版本）

绑定

语法：element.attachEvent(event,function)

　　event : （必需）事件类型，需要加“on”

　　function:（必需）指定事件触发时执行的函数

    <a href="#" id="btn1">点击按钮</a>
    <script>
        document.getElementById('btn1').attachEvent('onclick', function () {
            alert('hello world');
        })
    </script>

事件处理函数中，this代表的是window对象

移出

语法：element.detachEvent(event,function)

（2）W3C规范（不支持IE8及以下版本）

语法：element.addEventListener(event,function,useCapture)

　　event ： 不需要加“on”

　　useCapture：（可选）指定事件是否在捕获或冒泡截断进行。true，捕获。false，冒泡。默认false。

    <a href="#" id="btn1">点击按钮</a>
    <script>
        document.getElementById('btn1').addEventListener('click', function () {
            alert('hello world');
        })
    </script>

事件处理函数中，this代表dom对象

移出：

语法：element.removeEventListener(event,function,useCapture)

（3）封装事件监听

    <a href="#" id="btn1">点击按钮</a>
    <script>
        //绑定
        function addEventHandler(target, type, fn) {
            if (target.addEventListener) {
                target.addEventListener(type, fn);
            } else {
                target.attachEvent('on' + type, fn);
            }
        }
        //移除
        function removeEventHandler(target, type, fn) {
            if (target.removeEventListener) {
                target.removeEventListener(type, fn);
            } else {
                target.detachEvent('on' + type, fn);
            }
        }
        //测试
        var btn = document.getElementById('btn1');
        function hello() {
            alert('hello world');
        }
        addEventHandler(btn, 'click', hello);
        removeEventHandler(btn, 'click', hello);
    </script>

（4）事件监听的优点

• 可以绑定多个事件

    var btn = document.getElementById('btn1');
    btn.onclick = function () {
        alert('hello1')
    };
    btn.onclick = function () {
        alert('hello2');
    }

上述代码只弹出了hello2。也就是只执行了第二个函数

    var btn = document.getElementById('btn1');
    btn.addEventListener('click', function () {
        alert('hello1');
    })
    btn.addEventListener('click', function () {
        alert('hello2');
    })

上述代码两个函数都能执行

特殊例子，绑定同一个事件处理函数，并且都是事件冒泡或者事件捕获类型，那么只能绑定一次。

    <a href="#" id="btn">点击按钮</a>
    <script>
        var btn = document.getElementById('btn');
        function a() {
            alert(1);
        }
        btn.addEventListener('click', a, false);
        btn.addEventListener('click', a, false);
        //点击btn后，只会弹出一次1
    </script>

匿名函数之间即使代码完全一样，也是互不相同的。

• 可以解除相应的绑定

如果要解除相应的绑定，那么绑定的事件不能使用匿名函数，必须将事件处理函数单独写成一个函数，否则无法取消。