JQuery事件冒泡机制与解决
83453065 2011-07-26
1.什么是事件冒泡：
页面上有好多事件，也可以多个元素响应一个事件.假如:
<BODY onclick="alert('aaa');">
<div onclick="alert('bbb');">
<a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');>
提示
</a>
</div>
</BODY>上面这段代码一共有三个事件,body，div，a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒泡的过程是：a-->div-->body。a冒泡到div冒泡到body
2.事件冒泡引发的问题。
本来在上面的代码中只想触发<a>元素的onclick事件，然而<div>,<body>事件也同时触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递，我们可以用event.stopPropagation()阻止事件的传递行为.
3.jQuery对这个问题进行了必要的扩展和封装.
$("element").bind("click",function(event){
//event为事件对象
//.........
event.stopPropagation(); //停止事件冒泡
});4.阻止默认行为
网页中的某些元素是有自己的默认行为的，比如果超链接单节后需要跳转，提交按钮点击后需要提交表单，有时需要阻止这些行为，也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.
$('#submit').bind('click',function(event){
var username = $('#username').val();
if(username==""){
alert('用户名不能为空!');
event.preventDefault(); //阻止默认行为
}
})5.jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果
event.preventDefault();改写为：returnfalse;
event.stopPropagation();改写为：returnfalse;
推荐大家不要图省事，任何时候都写returnfalse;
一般情况下都是需要阻止默认行为。不要阻止事件冒泡。
相关推荐
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%&qu