1，定义数据封装的标签（定义界面）
2,确定事件源
3，注册时间
4，事件处理
需求：（html+css+javascript）
页面中有一个新闻区域
通过超链接 大中小
可以让用户改变区域中的字体大小
javascript:void(0)
<script type="text/javascript" src="tuxingjs.js"></script>
<script type="text/javascript">
function changeMax()
{
//var divNode=document.getElementById("newsid");
divNode.style.fontSize="30px";
}
function changeSize(size)
{
//var divNode=document.getElementById("newsid");
var divNode=byId("newsid");
divNode.style.fontSize=size;
}
function changeSize2(className)
{
var divNode=byId("newsid");
divNode.className=className;
}
</script>
<style>
.max{
font-size:24px;
background-color:#CCFF00;
}
.min{
font-size:9px;
background-color:#66FF33;
}
.norm{
font-size:16px;
background-color:#FF0000;
}
</style>
</head>
<body>
<h2>新闻标题</h2>
<a href="javascript:void(0)" onclick="changeSize2('max')">大</a>
<a href="javascript:void(0)"onclick="changeSize2('norm')">中</a>
<a href="javascript:void(0)"onclick="changeSize2('min')">小</a><br />
<div id="newsid" >
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
负担肾蕨口粮房间少得可怜飞洒抵抗力打算就看得见啦<br />
</div>
</body>
</html>
结果：
单击大 字体变大背景变成黄色
单击中 字体16PX背景变成红色
单击小 字体9PX背景变成绿色
2,需求点击实现一个展开闭合效果(overflow属性)(event.srcElement)
获取事件源对象的两种方式
1，通过event.srcElement属性
2,将事件源对象通过this传入
<style type="text/css">
table{
border:#00FFCC 1px solid;
}
table td{
border:#FF0000 1px solid;
background-color:#CCFF33;
}
table td div{
background-color:#CCCC66;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2(){
var aNode=event.srcElement;
var tdNode=aNode.parentNode;
var divNode=tdNode.getElementsByTagName("div")[0];
//alert(aNode.nodeName);
//alert(divNode.nodeName);
if(divNode.className=="open")
{
divNode.className="close";
}
else
{
divNode.className="open";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">还有菜单列表</a>
<div>
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
将少得可怜佛挡杀佛<br />
</div>
</td>
</tr>
</table>
</body>
</html>
结果：单击一个超链接开关效果