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 取消捕获

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

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

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

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