behaviour.js让你的HTML代码变干净

许多年以前，当我们的网页变得美观起来的时候，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">
<!--
function attaClick()
{
    for (i=0;c=document.getElementById("t1").getElementsByTagName("a").item(i);i++ )
    {
        c.onclick=function(){
            alert(this.innerHTML);
            return false;
        }
    }
}
window.onload=attaClick;
//-->
</script>
<span id="t1">
<a href="http://www.surfchen.org"/ >点我</a>
<a href="http://www.surfchen.org"/ >再点这个</a>
</span>
终于….终于把把HTML里的JS净化掉了。但是，你是否已经厌倦这种无止境的代码敲写中？来，试试这个好东西-behaviour.js..
他让这一切变得更加轻松。去下载：http://bennolan.com/behaviour/

behaviour可以让你使用CSS风格来给HTML元素加上各种行为。
例如上面这个例子。我们可以这样写。

<script type="text/javascript">
<!--
var js_style={
    '#t1 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>
完成这个过程主要分两步：
第一步：写JS样式
第二步：注册这个样式。

如果有多个 selector,可以这样

<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>

是不是很简单？
除了一些JS知识外，只需要你
1）了解基本的CSS语法；
2）把这个JS文件copy到你的站点并在网页中包含。

利用behaviour快速完成工作，然后，好好享受阳光，音乐，享受生活吧。 

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