冒泡定义：点击子组件会触发父组件事件，所有父组件，先子一层一层到父。
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;
};
};
