事件冒泡
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
中文名事件冒泡外文名Event Bubbling应 用软件编程所属学科逻辑学
目录
1 事件介绍
2 引发问题
3 阻止事件
4 扩展封装
5 阻止默认行为
6 阻止方法
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.引发问题
本来在上面的代码中只想触发元素的onclick事件,然而
3.阻止事件
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<script type = "text/javascript" >
var onBodyClickFn = function() {
alert("我是body上事件");
}
window.onload = function() {
var body = document.body;
body.addEventListener('click', onBodyClickFn, false); // false 冒泡阶段
//停止事件冒泡
document.getElementById("stopBubble").addEventListener("click",
function(event) {
alert("我是stopBubble_btn上事件");
event.stopPropagation();
},
false);
//正常事件冒泡
document.getElementById("bubble").addEventListener("click",
function() {
alert("我是bubble_btn上事件");
},
false);
};
</script>
</head > <body > <button id = 'stopBubble' > 阻止冒泡 < /button>
<button id="bubble">正常事件冒泡</button > </body>
</html>
4.扩展封装
$("element").bind("click",function(event){
//event为事件对象
//......... event.stopPropagation();
//停止事件冒泡
});
5.阻止默认行为
网页中的某些元素是有自己的默认行为的,比如超链接单击后需要跳转,提交按钮点击后需要提交表单,有时需要阻止这些行为,也就是默认行为。
jquery中可用用preventDefault()的方法来阻止元素的默认行为.
$('#submit').bind('click',
function(event) {
var username = $('#username').val();
if (username == "") {
alert('用户名不能为空!');
event.preventDefault(); //阻止默认行为
}
})
6.阻止方法
jquery中对冒泡和默认行为的阻止方法同样也可以改写,改写后能够达到同样的效果
event.preventDefault(); 改写为: return false;
event.stopPropagation(); 改写为: return false;