DOM二

1.cancelBubble可以用来在IE浏览器中阻止事件的冒泡和传递;stopPropation()也与其有相同的功能

语法:event.cancelBubble=true;

event:代表事件触发的状态,比如是那个元素触发了事件,按下了鼠标那个键.键盘被按下了那个键.都可以用event来载获.但event只支持IE

 1 <html>
2 <head>
3 <title></title>
4 <style>
5 body{
6 color:#333;
7 font-size:12px;
8 }
9
10 </style>
11 </head>
12 <body>
13 <div id="a">
14 <ul id="lia">请单击下面的列表.会触发body事件
15 <li>项目1</li>
16 <li>项目2</li>
17 <li>项目3</li>
18 </ul>
19
20 <ul id="lib">请单下面的列表.不会触发body事件.
21 <li>项目1</li>
22 <li>项目2</li>
23 <li>项目3</li>
24 </ul>
25 </div>
26 <script language="javascript">
27 document.body.onclick = function(){//首先为body元素绑定一个单击事件
28 alert("BODY事件");//单击页面即弹出对话框
29 }
30
31 function att_Event(){//为第一组li元素绑定onclick事件
32 var li = document.getElementById("lia").getElementsByTagName("li");
33 for(var i=0;i<li.length;i++){
34 li[i].onclick = function(){
35 alert("Li事件");
36 }
37 }
38
39 }
40
41 function att_Event_b(){//为第二组li元素绑定onclick事件
42 var li = document.getElementById("lib").getElementsByTagName("li");
43 for(var i=0;i<li.length;i++){
44 li[i].onclick = function(e){
45 alert("Li事件");
46 stopBubble(e); //运行阻止冒泡的函数
47 }
48 }
49
50 }
51 //该函数的功能用来阻止事件冒泡.并兼容多浏览器
52 function stopBubble(e){
53 //如果传入了事件对象.那么就是非IE浏览器
54 if(e){
55 //因此它支持W3C的stopPropation()方法
56 e.stopPropagation();
57 }
58 else{
59 //否则,我们得使用IE的方式来取消事件冒泡
60 window.event.cancelBubble = true;
61 }
62 }
63
64 window.onload = function(){
65 att_Event();
66 att_Event_b();
67 }
68 </script>
69 </body>
70 </html>

2.cells:获取表格(table)内或者某行(tr)内所有列单元格的引用.并可以根据指定的列号,来修改单元格显示的内容.

语法:cell_num=table.cells;||cell_num=tr.cells;

参数:table:获取该表格内所有列;tr获取该行内的所有列

View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dom:cells方法使用</title>
</head>
<body>
<table id="a" border="1">
<tr><td>web</td><td>Css</td></tr>
<tr><td>html</td><td>dom</td></tr>
<tr><td>javascript</td><td>ajax</td></tr>
</table>
<span id="str"></span>
<input type="button" value="更改第一行第列的数据" onclick="get_cells()" />
<script type="text/javascript">
function get_cells(){
var a = document.getElementById("a");
//下面这句在FF下会出错,IE下则没问题.你可以复制到本地机器去测试一下
//
document.getElementById("str").innerHTML = "表格中共有"+a.cells.length+"列数据";
a.rows[0].cells[0].innerHTML = "Web圈";//rows[0]代表表格的第一行,cells[0]代表引用行的第一列
alert(a.rows[0].cells.length); //弹出表格第一行中有几列数据
}
</script>
</body>
</html>

posted on 2011-07-26 15:02  咆哮的蛋蛋  阅读(118)  评论(0编辑  收藏  举报