js中的冒泡事件与事件监听
冒泡事件
js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的“冒泡”应该说是交换更加准确；js里面的“冒泡事件”才是真正意义上的“冒泡”，它从DOM最低层逐层遍历树，然后附加相应事件。以下面代码为例：
1
<title>冒泡事件</title>
2<script type="text/javascript">
3function Add(sText)
4
{
5
document.getElementById("Console").innerHTML +=sText;
6
}
7</script>
8</head>
9
10<body onclick="Add(’body事件触发<br />’)">
11<div onclick="Add(’div事件触发<br />’)">
12 <p onclick="Add(’p事件触发<br />’)" style="background:#c00;">点击</p>
13</div>
14<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>
15</body>
<title>冒泡事件</title>2
<script type="text/javascript">3
function Add(sText)4
{
5
document.getElementById("Console").innerHTML +=sText;6
}7
</script>8
</head>9
10
<body onclick="Add(’body事件触发<br />’)">11
<div onclick="Add(’div事件触发<br />’)">12
<p onclick="Add(’p事件触发<br />’)" style="background:#c00;">点击</p>13
</div>14
<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div>15
</body>事件监听
事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 btnAdd.onclick="alert(’51obj.cn’)"就是一种简单的附加事件，只不过这种方法不支持附加多个事件以及删除事件。以下代 码将实现附加事件后删除事件（IE下）：
1<script type="text/javascript">
2<!–
3var oP;
4function window.onload(){
5 oP=document.getElementById("pContent");
6 oP.attachEvent("onclick",Click);
7}
8function Click(){
9 alert("做点什么吧");
10 oP.detachEvent("onclick",Click);
11}
12//–>
13</script>
14</head>
15
16<body>
17<p id="pContent" style="border:solid 1px #d00; background:#cff;">点击</p>
<script type="text/javascript">2
<!–3
var oP;4
function window.onload(){5
oP=document.getElementById("pContent");6
oP.attachEvent("onclick",Click);7
}8
function Click(){9
alert("做点什么吧");10
oP.detachEvent("onclick",Click);11
}12
//–>13
</script>14
</head>15
16
<body>17
<p id="pContent" style="border:solid 1px #d00; background:#cff;">点击</p>IE不能称为标准的DOM浏览器，即使是最新的IE8，相对于标准DOM如Firefox、Opera等，它是个“异类”；在Firefox中才真正有称为事件监听的函数addEventListener，如下例
1<script type="text/javascript">
2<!–
3window.onload=function(){
4 var oBtn=document.getElementById("btn");
5 oBtn.addEventListener("click",Click,false);
6}
7function Click(){
8 alert("触发click事件");
9}
10//–>
11</script>
12<button id="btn">点击</button>
<script type="text/javascript">2
<!–3
window.onload=function(){4
var oBtn=document.getElementById("btn");5
oBtn.addEventListener("click",Click,false);6
}7
function Click(){8
alert("触发click事件");9
}10
//–>11
</script>12
<button id="btn">点击</button>从上面两个例子看出attachEvent在Firefox中并不支持，IE也不支持addEventListener.因此需要使用兼容性的方法。
1<script type="text/javascript">
2<!–
3var oBtn;
4window.onload=function(){
5 oBtn=document.getElementById("btn");
6
if(window.addEventListener){
7 oBtn.addEventListener("click",Click,false);
8
}//FF,Opera…
9 else if(window.attachEvent){
10 oBtn.attachEvent("onclick",Click,false);
11 }//IE
12 else{
13 oBtn.onclick=Click;
14 }//Other
15}
16
17function Click(){
18 alert("事件只执行一次");
19 if(window.addEventListener){
20 oBtn.removeEventListener("click",Click,false);
21 }//FF
22 else if(window.attachEvent){
23 oBtn.detachEvent("onclick",Click);
24 }
25 else{
26 oBtn.onclick=null;
27 }
28}
29//–>
30</script>
31</head>
32
33<body>
34<button id="btn">www.51obj.cn»»</button>
35</body>
<script type="text/javascript">2
<!–3
var oBtn;4
window.onload=function(){5
oBtn=document.getElementById("btn");6
if(window.addEventListener){
7
oBtn.addEventListener("click",Click,false);8
}//FF,Opera…9
else if(window.attachEvent){10
oBtn.attachEvent("onclick",Click,false);11
}//IE12
else{13
oBtn.onclick=Click;14
}//Other15
}16
17
function Click(){18
alert("事件只执行一次");19
if(window.addEventListener){20
oBtn.removeEventListener("click",Click,false);21
}//FF22
else if(window.attachEvent){23
oBtn.detachEvent("onclick",Click);24
}25
else{26
oBtn.onclick=null;27
}28
}29
//–>30
</script>31
</head>32
33
<body>34
<button id="btn">www.51obj.cn»»</button>35
</body>
