在一个结构良好的网页中,不仅要做到结构和表现的分离,而且应该做到结构和逻辑的分离。这里的逻辑通常就是指在页面中使用的js脚本,比如:
function toggleDl(){
//statement
}
var dl=document.getElementById("commentsList");
dl.onclick=toggleDl;
这就是一个结构分离的例子,它没有把onclick直接插入到html代码当中,而是通过dom模型取到这个结点然后加入语句来实现触发点击事件的功能。在这段代码中,onclick是一个事件句柄,它的值应该是一个函数体,当点击时会运行这个函数体。所以上面的语句不能够写成:
dl.onclick=toggleDl();
或者:
dl.onclick="toggleDl()";
前者把toggleDl()这个函数的返回值赋给了dl.onclick,后者把一个字符串赋给了dl.onclick,这都不是我们所要的。从这段代码可以看出,要想给一个触发器传递带参数的函数,是做不到的,而且在很多文章中,说到web页面的结构和逻辑页面分离,就会提到只对不需要参数的函数有效。要说参数,实际上还是有一个的,就是this指针,函数体内可以使用this来表示调用它的对象。但在我设计这个blog的过程中,却遇到了不得不传递参数过去的场合,即:右边的blog列表都是通过XmlHttp从服务器取得的,取到的是一个xml文档,然后即时解析成xhtml文档显示出来。这时候,查看评论和发表评论两个按钮必须要绑定点击事件,并且这个事件函数还必须传递日志id为参数。直接写入标记属性是不行的,只能借助触发器来实现。但触发器赋值又不能有参数,这个问题想了很久,终于功夫不负有心人,给我搞定了。解决办法是这样的:
由:dl.onclick=toggleDl(); 这样的语句想到,实际上dl.onclick的值是toggleDl()这个函数的返回值,即toggleDl()已经运行。那么,为什么不返回一个函数给dl.onclick呢?在返回的函数里面使用外壳函数传递进来的参数就好了。想到这里,小兴奋的试了一下,果然可行,代码如下:
function toggleDl(test){
return function(){
alert(test);
//……
} }
事件操作的逻辑放在被返回的那个函数体中执行,而参数则是在包装它的函数中传递,在这个例子中就是test作为参数。而绑定事件的语句就可以写成如下的样子:
dl.onclick=toggleDl(12);
这样dl被点击时就会正确的传递参数了。
function toggleDl(){
//statement
}
var dl=document.getElementById("commentsList");
dl.onclick=toggleDl;
这就是一个结构分离的例子,它没有把onclick直接插入到html代码当中,而是通过dom模型取到这个结点然后加入语句来实现触发点击事件的功能。在这段代码中,onclick是一个事件句柄,它的值应该是一个函数体,当点击时会运行这个函数体。所以上面的语句不能够写成:
dl.onclick=toggleDl();
或者:
dl.onclick="toggleDl()";
前者把toggleDl()这个函数的返回值赋给了dl.onclick,后者把一个字符串赋给了dl.onclick,这都不是我们所要的。从这段代码可以看出,要想给一个触发器传递带参数的函数,是做不到的,而且在很多文章中,说到web页面的结构和逻辑页面分离,就会提到只对不需要参数的函数有效。要说参数,实际上还是有一个的,就是this指针,函数体内可以使用this来表示调用它的对象。但在我设计这个blog的过程中,却遇到了不得不传递参数过去的场合,即:右边的blog列表都是通过XmlHttp从服务器取得的,取到的是一个xml文档,然后即时解析成xhtml文档显示出来。这时候,查看评论和发表评论两个按钮必须要绑定点击事件,并且这个事件函数还必须传递日志id为参数。直接写入标记属性是不行的,只能借助触发器来实现。但触发器赋值又不能有参数,这个问题想了很久,终于功夫不负有心人,给我搞定了。解决办法是这样的:
由:dl.onclick=toggleDl(); 这样的语句想到,实际上dl.onclick的值是toggleDl()这个函数的返回值,即toggleDl()已经运行。那么,为什么不返回一个函数给dl.onclick呢?在返回的函数里面使用外壳函数传递进来的参数就好了。想到这里,小兴奋的试了一下,果然可行,代码如下:
function toggleDl(test){
return function(){
alert(test);
//……
} }
事件操作的逻辑放在被返回的那个函数体中执行,而参数则是在包装它的函数中传递,在这个例子中就是test作为参数。而绑定事件的语句就可以写成如下的样子:
dl.onclick=toggleDl(12);
这样dl被点击时就会正确的传递参数了。