如何让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