JS中的事件绑定与捕获

             最近一直在学习前端知识（吐槽一下，有时候学着还真是很累。。。。），现在对事件绑定和捕获做一个小小的总结。

        1.如何进行事件绑定？

           实际开发中经常需要给一个对象绑定一个事件，我们经常采用如下方式：

           obj.onclick=fn1;

           但是，这种情况下会存在潜在问题，比如多个部门协作时，可能会出现如下代码：

           obj.onclick=fn2;

           这个时候obj的第二个点击事件将会覆盖第一个，因此，便有了方式二：

          IE下：obj.attachEvent(事件名称，事件函数); 

                //如：obj.attachEvent('onclick', fn1);

                         obj.attachEvent('onclick', fn2);

          两个点击事件便会不冲突，按照一定顺序发生，此处会有一点点区别。IE7会先执行后者（fn2）,再执行前者（fn1）。IE7以上正好相反。

             obj.addEventListener(事件名称，事件函数，是否捕获);//第三个参数，默认为false(冒泡)，true代表时间捕获（稍后讲到）。

         现在我们总结一下IE和非IE下二者的区别：

                 IE: 没有第三个捕获参数；事件名称有“on”；事件执行的顺序有差别；另外，IE下，事件绑定函数中，this是指向window对象的，而FireFox下this是指向触发该事件的对象。

2解决this指向问题的方法：

       采用call方法。即fn.call();

       call方法第一个参数可以改变函数执行过程中的内部this的指向，call方法第二个参数开始就是原来函数的参数列表；

因此，我们采用兼容处理的绑定函数：

function bind(obj, evname, fn) { if (obj.addEventListener) { obj.addEventListener(evname, fn, false); } else { obj.attachEvent('on' + evname, function() { fn.call(obj); }); } } 

        

 3.事件绑定的取消

          第一种事件绑定形式的取消：obj.onclick=null;

第二种形式的取消：

IE: obj.detachEvent(事件名称，事件函数);

非IE下：obj.removeEventListner(事件名称，事件函数,是否捕获)；

4. 时间捕获的概念

     假定存在如下代码：

     <div id="div1">

            <div id="div3">

                  <div id="div3">

                   </div>

             </div>

     </div>

那么当点击里面的div3时，点击事件是从外部“从天而降”先到达1，再到2，最后到3；然后时间开始向外反馈：从3到2，再到1，最后出去。那么进去的过程就可以理解为“捕获” ，出来的过程就可以理解为“冒泡”。

绑定函数中（不包括IE）,当第三个参数为true时，事件的相应时候便会发生捕获，false则为冒泡机制。

5.冒泡机制

事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制

阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;（event需要做兼容性处理）

 

2015年11月9日补充：

事件的捕获和冒泡其实是事件触发顺序的两种机制：

我们以点击事件为例：点击事件触发的时候，首先点击的是父级，然后一级一级往下传，直到目标层级。这时候，如果将事件捕获，必定会先触发父级的点击事件，接着是下一级，再往下....直到最后触发目标层级。而如果父级此时的捕获设置为false，那将首先触发目标层级的点击事件，然后点击事件不断网上冒泡到父级。。。直到document。其实就是点击事件到底是从父级进入到目标层级的过程中触发，还是从目标层级出来向上冒泡的时候触发！

以上为个人学习过程中的理解和总结，不正之处，还望指出！！！