什么是冒泡
在页面上可以有多个事件,也可以多个元素响应同一个事件。假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了click事件,同时body元素上也绑定了click事件。
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
元素的click事件会按照以下顺序“冒泡”。
1<span>
2<div>
3<body>
之所以称为冒泡,是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端。
事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。上例中,本来只想触发<span>元素的click事件,然而<div>元素和<body>元素的click事件也同时被触发了。因此,有必要对事件的作用范围进行限制。当单击<span>元素时,只触发<span>元素的click事件,而不触发<div>元素和<body>元素的click事件:当单击<div>元素时,只触发<div>元素的click事件,而不触发<body>元素的click事件。
事件对象
由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,JQuery进行了必要的扩展和封装,从而使得在任何浏览器中都能很轻松地获取事件对象以及事件对象的一些属性。
在程序中使用事件对象非常简单,只需要为函数添加一个参数,jQuery代码如下:
停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在JQuery中提供了stopPropagation()方法来停止事件冒泡。
阻止默认行为
网页中的元素有自己默认的行为,例如,单击超链接后会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
在JQuery中,提供了preventDefault()方法来阻止元素的默认行为。
举一个例子,在项目中,经常需要验证表单,在单击“提交”按钮时,验证表单内容,例如某元素是否是必填字段,某元素长度是否够6位等,当表单不符合提交条件时,要阻止表单的提交(默认行为)。
如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返同false。这是对在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。
在表单的例子中,可以把 event.preventDefault(); 改写为: return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改写为: return false;
事件捕获
事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最顶端往下开始触发。还是冒泡事件的例子,其中元素的click事件会按照以下顺序捕获。
- <body>
- <div>
- <span>
很显然,事件捕获是从最外层元素开始,然后再到最里层元素。因此绑定的click事件,首先会传递给<body>元素,然后传递给<div>元素,最后才传递给<span>元素。
遗憾的是,并非所有主流浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript来修复。JQuery不交持事件捕获,如果读者需要使用事件捕获,请直接使用原生的JavaScript。