事件冒泡
2017-11-20 本文已影响0人
温梦丽
照着书上的示例敲了一下：
一.什么是事件冒泡：
//html代码:
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
css代码:
#content{
width:200px;
height: 150px;
border: solid #ccc 1px;
}
span{
width: 150px;
margin: 0 auto;
display: block;
background: #e28c92;
}
#msg{
background:#e28c92;
width:200px;
}
//jQuery代码:
$(function(){
$("span").bind("click",function(){
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
});
$("#content").bind("click",function(){
var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
$("#msg").html(txt);
});
$("body").bind("click",function(){
var txt=$("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(txt);
});
})
在chrome浏览器下测试结果：（单击了span元素）
image.png
也就是在单击了span元素的同时，也单击了包含span元素的div元素及包含div元素的body元素，并且每个元素都会按照特定的顺序响应click事件。
元素的click事件会按照以下顺序“冒泡”。
1.span
2.div
3.body
之所以称为冒泡是因为事件会按照dom的层次结构向水泡一样不断向上直至顶端。
二.事件对象
在程序中使用事件对象特别简单，只要为函数添加一个参数(event)。
$("element").bind("click",funtion(event){
.....
})
当单击“element”元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁了。
三.阻止事件冒泡
1.停止事件冒泡
可以阻止事件中其他对象的时间处理函数被执行。在jQuery中提供stopPropagation()方法来停止事件冒泡。
修改后的jQuery代码如下：
$(function(){
$("span").bind("click",function(event){
var txt=$("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});
$("#content").bind("click",function(event){
var txt=$("#msg").html()+"<p>外层div元素被单击</p>";
$("#msg").html(txt);
event.stopPropagation();
});
$("body").bind("click",function(){
var txt=$("#msg").html()+"<p>body元素被单击</p>";
$("#msg").html(txt);
});
})
在chrome浏览器下测试结果：（单击了span元素）
image.png
2.阻止默认行为
网页中有些元素有一些默认的行为，比如单击提交按钮后表单会提交，有时候需要阻止元素的默认行为。
jQuery中提供了preventDefault()方法来阻止元素的默认行为。
html:
<form action="listshow.html">
<label>用户名：</label> <input type="text" id="username"/><br>
<input type="submit" value="提交" id="sub" />
</form>
<div id="warn"></div>
jquery:
$("#sub").bind("click",function(event){
var username=$("#username");
if(username.val()==""){
$("#warn").html("<p>文本框的值不能为空</p>");
event.preventDefault();
}
});
在chrome浏览器下测试结果：（在没有输入的情况下单击了提交按钮）
image.png
如果想同时对事件对象停止冒泡和默认行为，可以在事件对象上同时调用stopPrapagation()方法和preventDefault()方法的简写方式。
1.event.preventDefault();//阻止默认行为
改写成：
return false;
2.event.stopPrapagation();//停止事件冒泡
改写成：
return false;
事件捕获✘✘
事件捕获和事件冒泡是刚好向反的两个过程。事件捕获是从最顶端开始往下开始触发。并非所有主流浏览器都支持事件捕获，jQuery不支持事件捕获，如果需要使用事件捕获，直接使用原生的javascript实现。
