事件捕获 事件冒泡和事件委托

标签：click   element   function   name   情况   nodename   onclick   内容   上网   

   这两天做项目遇到一个bug，寻思良久也找不到解决方案；各种看技术文档才发现是平时忽略的事件捕获，事件委托和事件冒泡的概念出现的问题。遂上网了解了一下相关的内容。以下是我的学习总结。

事件捕获：发生事件时首先在document上，然后依次传递到body，最后到目标节点上；

事件冒泡：指事件到达指点节点后不会结束，会向上一节点冒泡，直到document对象，跟事件捕获相反;

网景公司采用事件捕获方式：即父元素先触发，子元素后触发；

IE则是采用事件冒泡方式：子元素先触发然后在触发父元素；

W3C则是中和了两种方式：先从document开始事件捕获，直到捕获到源事件节点，然后再从源事件向上冒泡；

开发者选择方式：方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。例如单机事件

　　　　　　　　element.addEventListener("click",fn,true)，表示事件捕获或者element.addEventListener("click",fn,false)表示事件冒泡;

一般情况：传统事件类似于onclick="fn()"，表示的则是事件冒泡机制。

IE的特殊化：由于ＩＥ浏览器只支持事件冒，而且ＩＥ浏览器也不支持addEventListener事件绑定；IE使用的是attachEvent来进行事件绑定，来进行事件冒泡，直到到达                          document为止；

鉴于以上的兼容性问题：个人推荐采用事件冒泡机制来对事件进行绑定比较合理。

说了事件捕获以及事件冒泡，下面简单说一下事件委托：事件委托的实现适合场景是一般对于要对父元素下一类子元素进行事件绑定；实现方式是避免对所有的子元素进行事件绑           定（需要设置一个循环来进行绑定，效率太低），而是获取父元素，对父元素添加事件监听，当子元素事件触发时监听器会查看是哪个子元素冒泡上来的事件。写一个简单的         例子（要对ul的所有li子元素添加鼠标移入事件）：

    oUl.onmouseover = function(ev){
        var ev = ev || window.event;
       var target = ev.target || ev.srcElement;
        //alert(target.innerHTML);
        if(target.nodeName.toLowerCase() == "li"){
        target.style.background = "red";
       }
     }
说完了事件捕获，事件委托和事件冒泡，以下来简要介绍以下阻止事件冒泡（不希望父元素执行相关动作）
　　在W3C下设置event.stopPropagation();而在下则是设置event.cancleBubble=true;
事件中还有一种需注意的就是事件的默认行为：类似于点击a标签进行跳转，鼠标右击出现选择菜单等；js中同样也封装了对这些事件的处理机制：
    在W3C下为event.preventDefault();在IE下则是window.event.returnValue = false;
在此做一个学习小结，供以后参考。

事件捕获 事件冒泡和事件委托

标签：click   element   function   name   情况   nodename   onclick   内容   上网   

原文地址：http://www.cnblogs.com/gehj/p/6705647.html