1 事件綁定：事件與函數綁定和怎麽取消綁定

1.1 元素.onclick這種形式，如下：

1         <div id="div1">aaa</div>
2         
3         <script type="text/javascript">
4             var oDiv1 = document.getElementById(‘div1‘);
5             oDiv1.onclick = function(){
6                 alert(this.innerHTML); //將會彈出aaa
 

7             }
8         </script>

這種綁定不存在什麽兼容性問題，但是如果想綁定2個事件，就麻煩了。上面的js代碼改成如下：

1             var oDiv1 = document.getElementById(‘div1‘);
2             oDiv1.onclick = function(){
3                 alert(this.innerHTML); //將會彈出aaa
4             }
5             oDiv1.onclick = function(){
6                 alert(this
 
.nodeType);
7             }

我們給oDiv1後面又綁定了onclick，前面的那個alert(this.innerHTML)就會失效。

這種方式綁定了，後面的代碼需要取消這個綁定，哪怎麽取消呢

1 //取消剛才的綁定
2 oDiv1.onclick = null;

當然，這裏只是很簡單的兩個函數例子，可以很容易將2個onclick合並，但是如果是多人合作，代碼多，結構復雜，還是看看其他的事件和函數綁定的方式吧。

1.2 元素.attachEvent 和 元素.addEventListener進行事件和函數綁定和取消，如下：

這種方式存在瀏覽器兼容性問題

/*
 
 總結
ie6/7/8 ：obj.attachEvent(事件名稱，事件函數);
    1.沒有捕獲（事件捕獲在後面講，是和冒泡相反的，IE不支持）
    2.事件名稱帶有on，如這裏是onclick 
    3.事件函數執行的順序是反著的，後綁定的那個函數先執行
    4.事件函數中this指向window，這不是本意，帶來了不方便
標準瀏覽器及高版本IE：obj.addEventListener(事件名稱，事件函數，是否捕獲);
    1.有捕獲
    2.事件名稱不帶on
    3.事件執行的順序是正常的
    4.this觸發該事件的對象
*/

上面的代碼繼續改，如下：

下面的代碼只能在IE6.7.8.9下運行，但是ie9也有addEventListener方法，就是IE9下attachEvent和addEventListener都行

 1         <div id="div1">aaa</div>
 2         
 3         <script type="text/javascript">
 4             var oDiv1 = document.getElementById(‘div1‘);
 5             //改的是這裏，事件和函數進行綁定
 6             oDiv1.attachEvent(‘onclick‘,function(){
 7                 //這裏的this變成了window，也不能用this.innerHTML了
 8                 alert(oDiv1.innerHTML);                
 9             });
10             oDiv1.attachEvent(‘onclick‘,function(){
11                 alert(oDiv1.nodeType);                
12             });            
13         </script>

再看看標準瀏覽器，如谷歌火狐瀏覽下怎麽寫

 1         <div id="div1">aaa</div>
 2         
 3         <script type="text/javascript">
 4             var oDiv1 = document.getElementById(‘div1‘);
 5             //改的是這裏，事件和函數進行綁定，IE.6.7.8不支持addEventListener
 6             oDiv1.addEventListener(‘click‘,function(){
 7                 //在標準瀏覽器下，this還是只oDiv1
 8                 alert(this.innerHTML);                
 9             });//addEventListener第三個參數沒寫，默認：冒泡
10             oDiv1.addEventListener(‘click‘,function(){
11                 alert(this.nodeType);                
12             });            
13         </script>

存在兼容性問題，我們封裝一個函數進行事件綁定操作

 1         <div id="div1">aaa</div>
 2         
 3         <script type="text/javascript">
 4             var oDiv1 = document.getElementById(‘div1‘);
 5             
 6             //改的是這裏，封裝了一個bind函數來解決
 7             function bind(obj,evname,fn){
 8                 if(obj.addEventListener){ //IE9+、谷歌、火狐等
 9                     obj.addEventListener(evname,fn);
10                 }else{//IE6.7.8，雖然IE9也支持attachEvent，但是IE9用上面的addEventListener了
11                     obj.attachEvent(‘on‘+evname,function(){
12                         fn.call(obj);
13                     });
14                 }
15             }
16 
17             //使用
18             bind(oDiv1, ‘click‘, function(){
19                 alert(this.innerHTML);    
20             });
21             bind(oDiv1, ‘click‘, function(){
22                 alert(this.nodeType);    
23             });
24         </script>

那怎麽取消掉這種方式綁定呢？

/*
            老ie : obj.detachEvent(事件名稱，事件函數);
            標準    : obj.removeEventListener(事件名稱，事件函數，是否捕獲);
            */
/**

上面事件綁定的時候，我沒有給函數命名，是個匿名函數。那匿名函數看著是一樣的代碼，確是不同的對象，就沒有辦法取消的了。


*/

            
            oDiv1.addEventListener(‘click‘, fn1, true); 
            // 綁定的時候是true，取消的時候，最後那個參數也需要為true，為false則取消不掉
            // 下面fn1改為fn2不報錯，雖然document沒有綁定fn2，但是改為fn3就不行了，報錯：不存在fn3這個函數
            oDiv1.removeEventListener(‘click‘, fn1, true); 

            var oDiv1 = document.getElementById(‘div1‘);
            
            oDiv1.addEventListener(‘click‘,function(){
                alert(this.innerHTML);
            });
    //取消不了，因為匿名函數沒有抓手，得用有名字的函數
            oDiv1.removeEventListener(‘click‘,function(){
                alert(this.innerHTML);
            });

而上面這個換成下面這樣就起效果。

            var oDiv1 = document.getElementById(‘div1‘);
            
            oDiv1.addEventListener(‘click‘,fn1});
            //這樣點擊就沒有效果，因為取消掉了
            oDiv1.removeEventListener(‘click‘,fn1);
            
            function fn1(){
                alert(this.innerHTML);
            }    

未完待續...

JS中事件綁定函數，事件捕獲，事件冒泡