如何让Html代码更干净(Behaviour)

许多年以前，当我们的网页变得美观起来的时候，HTML也相应的臃肿了起来。
CSS的出现和发展，使得我们终于可以把HTML变得干净了。class,id也取代了font,color等标签的属性，几乎所有的美化我们都可以通过CSS来进行。
但是HTML和CSS的蜜月被JS破坏了。为了使页面交互能力更强，我们不得不在许多HTML标签里使用onclick=”func()”,onmouseover=”func();”这样的东西。例如yahoo首页，如果你查看它的HTML源代码，你将会发现很多onclick这样的东西。
如果我想知道一个元素中的HTML代码（innerHTML）, 我不得不这样写
  
  
  
  


   
   
   
   
 
    
<span id="t1">
<a href="http://www.surfchen.org" onClick="alert(this.innerHTML);return false;">点我</a>
<a href="http://www.surfchen.org" onClick="alert(this.innerHTML);return false;">再点这个</a>
</span>
 
   

  
  
  
  
或许，有经验地js程序员会这样处理。

  
  
  
  


   
   
   
   
 
    
<span id="t1">
<a href="http://www.surfchen.org">点我</a>
<a href="http://www.surfchen.org">再点这个</a>
</span>
<script type="text/javascript">
<!--
for (i=0;c=document.getElementById("t1").getElementsByTagName("a").item(i);i++ )
{
	c.onclick=function(){
		alert(this.innerHTML);
		return false;
	}
}
//-->
</script>
 
   

  
  
  
  
这样就让HTML代码美观好多了，但是有个缺点，就是for
语句必须放在HTML元素之后。。
更加高明一点的程序员会把这个for放在函数里，然后在window.onload调用该函数。这样可以使得不用在HTML元素输出后再写这个for.

<script type="text/javascript">
<!--
var js_style={
	'#t1 a':function(e)//指明了行为对象为id=t1下的所有a元素，e为当前的元素对象
	{
		e.onclick=function()//给当前对象加上onclick事件
		{
			alert(this.innerHTML);
			return false;
		}
	},//这里用个逗号
      '#t2 a':function(e)//指明了行为对象为id=t1下的所有a元素，e为当前的元素对象
	{
		e.onclick=function()//给当前对象加上onclick事件
		{
			alert(this.innerHTML);
			return false;
		}
	}
}
Behaviour.register(js_style);//注册上面的“js样式”
//-->
</script>
<span id="t1">
<a href="http://www.surfchen.org">点我</a>
<a href="http://www.surfchen.org">再点这个</a>
</span>
<span id="t2">
<a href="http://www.surfchen.org">点我</a>
<a href="http://www.surfchen.org">再点这个</a>
</span>

 转自:http://www.surfchen.org/?p=59