这个是关于事件冒泡的 。
这是一个简单的事件冒泡，首先我们放几个div。代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
}
function change() {
alert("change");
}
function change1() {
alert("change1");
}
function change2() {
alert("change2");
}
</script>
<style type="text/css">
#content{ width:500px; height:500px; border:1px solid green;}
#content1{ width:300px; height:300px; position:absolute; top:50px; left:50px; border:1px solid red;}
#content2{ width:200px; height:200px; position:absolute; top:50px; left:50px; border:1px solid blue;}
</style>
</head>
<body>
<div id="content" onclick="change();">
<div id="content1" onclick="change1();">
<div id="content2" onclick="change2();">我爱北京天安门</div>
</div>
</div>
</body>
</html>
这个代码似乎看起来没什么问题。但是我们知道，absolute是绝对定位，所谓的绝对是相对于浏览器可视区域的左上角。
但是真正的布局却成了这样，我们的content2是position:absolute; top:50px; left:50px; 和content1一样，按照常理来说应该content2和content1的坐标原点也就是左上角应该是重合的。
这里要注意这点，反正我是菜鸟也没什么原理性的知识来解释这个问题。我只能说父容器的绝对定位影响到了子容器。
其实事件冒泡有2中方式，这种特性提现在火狐浏览器上面。这个在下面再说。
我们现在要实现这样一个功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function change1() {
alert("change1");
}
function change2() {
alert("change2");
}
function change3() {
alert("change3");
}
function change() {
document.getElementById("content2").innerHTML = "<input type='text'><input type='button' value='增加'/><input type='button' value='删除'/>"
}
</script>
<style type="text/css">
#content{ width:500px; height:500px; border:1px solid green;}
#content1{ width:300px; height:300px; position:absolute; top:50px; left:50px; border:1px solid red;}
#content2{ width:200px; height:200px; position:absolute; top:50px; left:50px; border:1px solid blue;}
</style>
</head>
<body>
<div id="content" onclick="change1();">
<div id="content1" onclick="change2();">
<div id="content2" onclick="change3();">我爱北京天安门<input type="button" value="修改" onclick="change();"/></div>
</div>
</div>
</body>
</html>
当我们点击修改按钮的时候，我们 content2的内容变成了2个文本框2个按钮。
当我们点击修改的时候会出现我们想象的结果，但是大家仔细想象，我们的冒泡怎么不在了 ，按照代码的样子，我们点击修改的时候不但会触发onclick事件，同时会触发oncliclk3、oncliclk2、oncliclk1事件，但是为什么我们点击的时候不会触发呢 。
我们说事件冒泡一般情况下是是从dom树的事件源的子节点向根节点逐步触发的。当我们点击按钮的时候，触发事件的真正的源头就消失不见了。
我们可以这样理解，就像我们说老大让小弟去干什么事情，但是突然老大死了，小弟们就都闪了。
但是当我们点击我们新添加的dom树的节点里面的所有标签的时候仍然会触发父节点的冒泡，这个时候我们就需要去阻止冒泡。
阻止事件冒泡：在ie下面我们用window.event,cancelBubble=true来阻止，在FF中我们用event.prevent.Default()来阻止冒泡。
这个时候我们就可以对我们添加的innerHTML中的标签来添加一个事件，用这个事件去执行这些代码。
由于刚刚喝了一点酒，思路不是很清晰。其实这个事件冒泡我们还可以写到父节点中，没必要为每个input标签去添加这么一个阻止事件冒泡的代码。这里我就不多写了，早点睡了。
希望大家看到这里能学到一点点东西，其实做程序的主要还是得自己多写代码自己多练。
