事件绑定

1、JavaScript代码中直接绑定：

在JavaScript中通过查找DOM对象，对其绑定，obj.οnclick=fn； 的格式，举例如下：

<script type="text/javascript">
    function fn1(){
        alert(1);
    }
    function fn2(){
        alert(2);
    }
    document.onclick=fn1;
    document.onclick=fn2;
</script>

运行代码，点击文档，只弹出了“2”，说明后面的事件函数覆盖了前面的。
取消绑定：document.οnclick=null;

---

2、绑定事件监听函数（可实现给同一个对象的同一个事件绑定多个不同的函数。）

非标准ie： obj.attachEvent(事件名称，事件函数)；

<script type="text/javascript">
    function fn1(){
        alert(1);
    }
    function fn2(){
        alert(2);
    }
    document.attachEvent('onclick',fn1);
    document.attachEvent('onclick',fn2);
</script>

标准ie也可用： obj.attachEvent(事件名称，事件函数)；
只是执行顺序不同。

执行顺序：
非标准ie：自下而上
标准ie：自上而下

问题：this指向window。
解决：使用函数下的call()。
call方法第一个参数可以改变函数执行过程中的内部this指向，若第一个参数为null则指向原本该指向的东西。call方法第二个参数开始就是原来函数的参数列表。

取消绑定： obj.detachEvent(事件名称，事件函数)；

---

标准浏览器（包括标准ie）：obj.addEventListener( 事件名称 , 事件函数 ，是否捕获 );
事件名称：不加 ‘on’；
是否捕获：默认false，即不捕获。

<script type="text/javascript">
    function fn1(){
        alert(1);
    }
    function fn2(){
        alert(2);
    }
    document.addEventListener('click',fn1,false);
    document.addEventListener('click',fn2,false);
</script>

执行顺序：
自上而下

取消绑定： obj.removeEventListener(事件名称，事件函数，是否捕获)；

---

封装兼容：

<script type="text/javascript">
    function fn1(){
        alert(1);
    }

    function fn2(){
        alert(2);
    }

    function bind(obj,evtname,fn){
        if (obj.addEventListener) {
            obj.addEventListener(evtname,fn,false);
        }else{
            obj.attachEvent('on'+evtname,function(){
                fn.call(obj);
            })
        }
    }

    bind(document,'click',fn1);
    bind(document,'click',fn2);
</script>