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

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>

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             }

/* 总结
ie6/7/8 ：obj.attachEvent(事件名称，事件函数);
    1.没有捕获（事件捕获在后面讲，是和冒泡相反的，IE不支持）
    2.事件名称带有on，如这里是onclick 
    3.事件函数执行的顺序是反着的，后绑定的那个函数先执行
    4.事件函数中this指向window，这不是本意，带来了不方便
标准浏览器及高版本IE：obj.addEventListener(事件名称，事件函数，是否捕获);
    1.有捕获
    2.事件名称不带on
    3.事件执行的顺序是正常的
    4.this触发该事件的对象
*/

 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);
            }    

 1     <style>
 2         div   {padding: 40px;}
 3         #div1 {background:red}
 4         #div2 {background:green}
 5         #div3 {background:blue; position: absolute; top: 300px;}
 6     </style>
 7     <div id="div1">
 8         <div id="div2">
 9             <div id="div3"></div>
10         </div>
11     </div>
12     <script>
13         window.onload = function() {
14     
15             //事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
16             /*
17              实例来说：
18              下面的例子，从html中来看，div3是div2的子元素，div2又是div1的子元素，div1是body的子元素
19             当div3发生事件的时候（这里是onclick），浏览器会认为div2也发生了该事件，div1也发生了该事件
20             就是事件从子级朝父级冒泡
21             同时，注意，div3加上绝对定位，视觉上在div1中也不行，点击div3,div1还是会认为被点击了
22              
23             */
24     
25             var oDiv1 = document.getElementById('div1');
26             var oDiv2 = document.getElementById('div2');
27             var oDiv3 = document.getElementById('div3');
28     
29             function fn1() {
30                 alert(this.id);
31             }
32     
33             //事件函数绑定
34             oDiv1.onclick = fn1; //告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1
35             oDiv2.onclick = fn1;
36             oDiv3.onclick = fn1;
37     
38         }
39     </script>

1             function fn1(ev) {
2                 var ev = ev || window.event;
3                 ev.cancelBubble = true;
4                 alert(this.id);
5             }

//第三个参数，默认false，也就是冒泡。如果第三个参数为true，则为事件捕获
obj.removeEventListener(事件名称，事件函数，是否捕获);