冒泡和事件委托

冒泡定义：点击子组件会触发父组件事件，所有父组件，先子一层一层到父。
1

jq阻止冒泡有3种方法：

1， event.stopPropagation();//需要有参数event。它阻止了冒泡，但是不阻止默认行为
2， return false;//阻止事件冒泡也阻止默认行为
3，event.preventDefault(); //不阻止冒泡但是阻止默认行为

代码如下：
$('span').bind("click",function(e){
       alert("span");
      // e.stopPropagation();  阻止冒泡但不阻止默认行为
    //   return false;   组织冒泡和默认行为
       e.preventDefault();//不默认冒泡阻止默认行为

js阻止冒泡

 
1,使用on方式绑定的事件通过cancelBubble阻止冒泡。 
 
function stopBubble(e) { 
if ( e && e.stopPropagation ) //非IE
    e.stopPropagation(); //阻止冒泡
 e.preventDefault();//阻止默认行为 如表单提交和a标签
else //IE
    window.event.cancelBubble = true; //阻止冒泡
  window.event.returnValue = false;//阻止默认行为 如表单提交和a标签
}

JQ的事件委托

事件委托定义：利用事件冒泡原理，在父元素上绑定事件，点击子元素，冒泡到父元素方法，判断是属于哪个子元素，然后在相关事件处理。

1，bind()，//不完美
2，live()//jq1.7取消这个方法
3，delegate() //可以用,
4，on()，//重点用
以上4个都是jq事件委托的方法。

$(“ul”).on(     //委托的父元素
“click”,
“li”, //select参数，子元素
data,//可以省略
 funtion(){});//方法

on()//最理想的实现方式
jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，兼容性也好，随着jq的兼容来的。
将会增加一对新的事件方法：.on()和.off(),以下为on（）的实现方式：
 $("#di").on("click", function(e){
         alert(e.target.id);
         //alert(e.target.tagName);
     });
-----------------------------------
//还可以指定第二个参数，只有子元素button才会相应，父元素不会做相应
 $("#di").on("click", "button",function(e){  
         alert(e.target.id);
         alert(e.target.tagName);
     });

.delegate()//比live（）好一些，建议使用.on()

 在下列情况下，应该使用.live()或.delegate()，而不能使用.bind()：
为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；

$("#di").delegate("button","click",function(){
         $(this).css("color","red");
});
支持$("table").find("#info").delegate...，支持前面选择器精确控制；

live（）
在结构简单的情况下可以使用live（）
层次较深的话，live（）会导致性能下降
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

js事件委托

 var a = document.getElementById("a");
    a.addEventListener("click",function(ev) {//已经兼容ie
         var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if( target.className.split(" ")=='c')
        {
            alert("我是class名称为c的")
        }
          if(target.nodeName.toLowerCase() == 'div'){
          alert("我是div元素")
        }
    });

js事件委托id
var fa=document.getElementById("di");
         EventUtil.addHandler(fa, "click",hander);
         function hander(event){
             event=EventUtil.getEvent(event);
             var target=EventUtil.getTarget(event);//目标事件的target
             switch (target.id){
                 case "a":
                     alert("a");
                     break;
                 case "b":
                     alert("b");
                     break;
                 case "c":
                     alert("c");
                     break;
             };

         };