事件綁定

1、JavaScript代碼中直接綁定：

在JavaScript中通過查找DOM對象，對其綁定，obj.οnclick=fn； 的格式，舉例如下：

<script type="text/javascript">
    function fn1(){
        alert(1);
    }
    function fn2(){
        alert(2);
    }
    document.οnclick=fn1;
    document.οnclick=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>