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

1 事件绑定：事件与函数绑定以及怎么取消绑定

1.1 元素.onclick这种形式，如下：

         <div id="div1">aaa</div>

         <script type="text/javascript">
             var oDiv1 = document.getElementById('div1');
             oDiv1.onclick = function(){
                 alert(this.innerHTML); //将会弹出aaa
             }
         </script>

这种绑定不存在什么兼容性问题，但是如果想绑定2个事件，就麻烦了。上面的js代码改成如下：

             var oDiv1 = document.getElementById('div1');
             oDiv1.onclick = function(){
                 alert(this.innerHTML); //将会弹出aaa
             }
             oDiv1.onclick = function(){
                 alert(this.nodeType);
             }

我们给oDiv1后面又绑定了onclick，前面的那个alert(this.innerHTML)就会失效。

这种方式绑定了，后面的代码需要取消这个绑定，哪怎么取消呢

 //取消刚才的绑定
 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都行

         <div id="div1">aaa</div>

         <script type="text/javascript">
             var oDiv1 = document.getElementById('div1');
             //改的是这里，事件和函数进行绑定
             oDiv1.attachEvent('onclick',function(){
                 //这里的this变成了window，也不能用this.innerHTML了
                 alert(oDiv1.innerHTML);
             });
             oDiv1.attachEvent('onclick',function(){
                 alert(oDiv1.nodeType);
             });
         </script>

再看看标准浏览器，如谷歌火狐浏览下怎么写

         <div id="div1">aaa</div>

         <script type="text/javascript">
             var oDiv1 = document.getElementById('div1');
             //改的是这里，事件和函数进行绑定，IE.6.7.8不支持addEventListener
             oDiv1.addEventListener('click',function(){
                 //在标准浏览器下，this还是只oDiv1
                 alert(this.innerHTML);
             });//addEventListener第三个参数没写，默认：冒泡
             oDiv1.addEventListener('click',function(){
                 alert(this.nodeType);
             });
         </script>

存在兼容性问题，我们封装一个函数进行事件绑定操作

         <div id="div1">aaa</div>

         <script type="text/javascript">
             var oDiv1 = document.getElementById('div1');

             //改的是这里，封装了一个bind函数来解决
             function bind(obj,evname,fn){
                 if(obj.addEventListener){ //IE9+、谷歌、火狐等
                     obj.addEventListener(evname,fn);
                 }else{//IE6.7.8，虽然IE9也支持attachEvent，但是IE9用上面的addEventListener了
                     obj.attachEvent('on'+evname,function(){
                         fn.call(obj);
                     });
                 }
             }

             //使用
             bind(oDiv1, 'click', function(){
                 alert(this.innerHTML);
             });
             bind(oDiv1, 'click', function(){
                 alert(this.nodeType);
             });
         </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);
            }    

2. 事件冒泡和取消冒泡

2.1 事件冒泡

比如：div1里面有div2，div2里又有div3。那么当点击div3时，系统会认为div2也点了，div1也点了，body也点了，document也点了，一直到window。一层一层往外冒泡。具体内容如下：

     <style>
         div   {padding: 40px;}
         #div1 {background:red}
         #div2 {background:green}
         #div3 {background:blue; position: absolute; top: 300px;}
     </style>
     <div id="div1">
         <div id="div2">
             <div id="div3"></div>
         </div>
     </div>
     <script>
         window.onload = function() {

             //事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制
             /*
              实例来说：
              下面的例子，从html中来看，div3是div2的子元素，div2又是div1的子元素，div1是body的子元素
             当div3发生事件的时候（这里是onclick），浏览器会认为div2也发生了该事件，div1也发生了该事件
             就是事件从子级朝父级冒泡
             同时，注意，div3加上绝对定位，视觉上在div1中也不行，点击div3,div1还是会认为被点击了

             */

             var oDiv1 = document.getElementById('div1');
             var oDiv2 = document.getElementById('div2');
             var oDiv3 = document.getElementById('div3');

             function fn1() {
                 alert(this.id);
             }

             //事件函数绑定
             oDiv1.onclick = fn1; //告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1
             oDiv2.onclick = fn1;
             oDiv3.onclick = fn1;

         }
     </script>

那有个问题，在不知道事件冒泡这个事情的时候，也正常用，没出什么问题呀？

答：因为大多数时候，子级点击发生事件就是我们最终的效果，会传到父级身上产生事件，但是父级没绑定函数，也就没有反应，我们也就感觉不到干嘛要学到用到这一块的东西。但是，子级和父级产生冲突的时候，就需要了解原因，取消冒泡了。

子级和父级同一事件冲突举例：

点击某按钮，希望弹出一个div层，而点击页面中任何除去div层一部分，希望div层隐藏。这里，点击按钮和div层都会冒泡到document，就等同于告诉document，点击后弹出div层，而后面点击页面中任何一部分，又希望隐藏div层，document接到完全矛盾的命令，怎么办？只能是点击按钮和div层的时候，取消冒泡，这样，document就不觉得自己被点击了。怎么取消冒泡？如下：

2.2 取消冒泡：事件绑定函数中加上ev.cancelBubble = true;

上面的代码中，fn1修改下就可以了，如下：

             function fn1(ev) {
                 var ev = ev || window.event;
                 ev.cancelBubble = true;
                 alert(this.id);
             }

fn1更换过后，点击div3时，由原来的弹出3次，分别是div3,div2,div1，变成了弹出1次，div3，为何？因为取消冒泡了，div2和div1不认为自己被点击了，也就不调用函数了，也就不弹了。

3 事件捕获

3.1 事件捕获

事件捕获是一个和事件冒泡反着的过程。

冒泡是：点了儿子，儿子觉得被点了（如果绑定了函数，函数执行），然后老子也觉得被点了（如果绑定了函数，函数执行）。

捕获是：点了儿子，老子先觉得被点了（如果绑定了函数，函数执行），然后儿子也觉得被点了（如果绑定了函数，函数执行）。

顺序不同，老旧的IE浏览器没有事件捕获的概念，只有冒泡。元素.onclick这种形式的绑定时，就是事件冒泡。

在火狐，谷歌，IE9+浏览器下：

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

3.2 取消捕获

我认为捕获没有取消的概念，

事件冒泡时候冲突是这样的。子级点击要往东，父级点击要往西。点击子级的时候，往东，但是父级认为自己也点击了，结果是往西。而点击父级非子级区域时，还是往西。于是矛盾了，只能往西，实现不了往东。

事件是捕获的话，点击，父级要往西，子级要往东，结局：往东。而点击父级的非子级区域时候，往西。往东往西都可以实现。

所以，捕获没有向冒泡那样，还需要取消冒泡，这个概念。这地方是我自己的理解，不一定到位，暂时存疑吧！