JS中事件绑定函数，事件捕获，事件冒泡

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)就会失效。

当然，这里只是很简单的两个函数例子，可以很容易将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>

未完待续...