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