海洋工作室——网站建设专家：事件冒泡测试【供初学者参考】
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" onclick="alerthtml();" style=" background-color:Maroon;" >
3 <head>
4 <title></title>
5
6 <script language="javascript" type="text/javascript">
7 function alerthtml() {
8 alert("HTML");
9 }
10 function alertbody(oEvent) {
11 alert("Body");
12 oEvent.cancelBubble = true; //表示取消 HTML 的事件
13 }
14 function alertdiv() {
15 alert("DIV");
16 }
17 function alertbutton() {
18 alert("Button");
19 }
20 </script>
21
22 </head>
23 <body onclick="alertbody(event);" style=" height:400px; width:400px; background-color:Green; padding:0px; margin:0px;">
24 <div onclick="alertdiv();" style=" height:200px; width:200px; background-color:Red;">
25 <input id="btnSubmit" type="button" value="Submit" onclick="alertbutton();" />
26 </div>
27 </body>
28 </html>
29
2 <html xmlns="http://www.w3.org/1999/xhtml" onclick="alerthtml();" style=" background-color:Maroon;" >
3 <head>
4 <title></title>
5
6 <script language="javascript" type="text/javascript">
7 function alerthtml() {
8 alert("HTML");
9 }
10 function alertbody(oEvent) {
11 alert("Body");
12 oEvent.cancelBubble = true; //表示取消 HTML 的事件
13 }
14 function alertdiv() {
15 alert("DIV");
16 }
17 function alertbutton() {
18 alert("Button");
19 }
20 </script>
21
22 </head>
23 <body onclick="alertbody(event);" style=" height:400px; width:400px; background-color:Green; padding:0px; margin:0px;">
24 <div onclick="alertdiv();" style=" height:200px; width:200px; background-color:Red;">
25 <input id="btnSubmit" type="button" value="Submit" onclick="alertbutton();" />
26 </div>
27 </body>
28 </html>
29
