事件起泡 Event bubbling

来源:互联网 发布:嵌入式linux工资 编辑:程序博客网 时间:2024/03/28 19:55

当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生。

当事件发生后,这个事件就要开始传播。事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。

当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了。事件的传播是有方向的,当点击一个按钮时所产生的事件从这个按钮处开始向上传播(就像一个水泡从杯底冒上来,这就是之所以叫事件冒泡的原因),但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义(即该属性指向一个存在的函数或一段可执行的语句),如果有,执行这个函数或语句;然后事件继续向上传播,到达按钮的上一层对象(例如一个form对象或document对象,总之是包含了按钮的父对象),如果该对象也定义了onclick属性,则执行属性的值。

所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。

下面例子用到http://jquery.com/的jQuery框架

起泡实例:
<html>
<head>
<style type="text/css">
body{background:#000;color:#FFF}
form{background:#F00}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<form>
<input type="button" value="button">
</form>
<script type="text/javascript">
$(window).click(function () {alert("window");});
$(document).click(function () {alert("document");});
$("form").click(function () {alert("form");});
$("input").click(function () {alert("button");});
</script>
</body>
</html>

阻止气泡:
<html>
<head>
<style type="text/css">
body{background:#000;color:#FFF}
form{background:#F00}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<form>
<input type="button" value="button">
</form>
<script type="text/javascript">
$(window).click(function (even) {even.stopPropagation();alert("window");});
$(document).click(function (even) {even.stopPropagation();alert("document");});
$("form").click(function (even) {even.stopPropagation();alert("form");});
$("input").click(function (even) {even.stopPropagation();alert("button");});
</script>
</body>
</html>

原创粉丝点击