什么是冒泡
在页面上可以有多个事件，也可以多个元素响应同一个事件。架设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时在body上绑定了click事件。代码如下：
<body>
<div id="content">
<span>hello</span>
</div>
<div id="msg"></div>
<script>
$(function(){
var txt=$("#msg").html()
$("span").click(function(){
txt+="<p>span被点击</p>"
$("#msg").html(txt)
})
$("#content").click(function(){
txt+="<p>content被点击</p>"
$("#msg").html(txt)
})
$("body").click(function(){
txt+="body被点击"
$("#msg").html(txt)
})
})
</script>
</body>
效果：当单击span会输出三条记录，这就是由事件冒泡引起的。
演示效果
在单击span的同时，也点击了包含该元素的content和body，并且每一个元素都会按照特定的顺序响应click事件。
元素绑定的click事件会按照以下顺序冒泡：
1.<span>
2.<div id="content">
3.<body>
之所以称为冒泡，是因为事件会按照dom结构像水泡不断向上直至顶端。
事件冒泡带来的问题
在上例中，本来想触发span的click事件，但包含它的元素的click事件也被触发了，所以必须要对事件的作用范围进行限制。点击哪个元素就触发哪个元素的事件，不触发包含它的元素的事件。
事件对象
由于ie-dom和标准dom实现事件对象的方法不同，导致在不同浏览器中获取事件对象变得比较困难。针对这个问题，jQuery进行了封装，从而使在任何浏览器中都能轻松的获得事件对象以及事件对象的某些属性。
在程序中为事件的函数添加参数。
$("element").bind("click",function(event){
//....
});
当单击element元素时，事件对象被创建，这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。
停止事件冒泡
可以阻止事件中其他对象的事件处理函数被执行。在jQuery中用stopPropagation()方法来停止事件冒泡。
根据以上例子，改写相关代码：
$("span").click(function(e){
txt+="<p>span被点击</p>"
$("#msg").html(txt)
e.stopPropagation()
})
演示效果
阻止默认行为
网页中有些元素有自己的默认行为，如：单击超链接后会跳转，单击“提交”按钮表单会提交，有时要阻止元素的默认行为。
jQuery中使用preventDefault()方法来阻止元素的默认行为。
举例：在验证表单时，检查某必填字段的长度是否为指定值，不符合条件时，阻止默认表单提交事件。
<form action="a.html">
手机号: <input type="text" id="tel">
<input type="submit" value="提交" id="submit">
</form>
<div id="msg"></div>
<script>
$(function(){
$("#submit").click(function(e){
var length=$("#tel").val().length
console.log(length)
e.preventDefault()
if(length!=11){
$("#msg").text("长度为"+length+"!手机号长度必须为11位!")
e.preventDefault()
}
})
})
</script>
演示效果
如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()和preventDefault()的一种简写方式。在上例中，可以把
e.preventDefault()
写成
return false
事件捕获
事件捕获与冒泡相反，由最顶端往下触发（最外层元素向内层元素触发）。但并非所有浏览器都支持事件捕获，这个缺陷无法用JavaScript弥补。jQuery不支持事件捕获，如果需要使用原生的JavaScript。
网友评论