javascript中的触发器传递参数

本文探讨了如何在不直接将事件处理程序附加到HTML元素的情况下,为JavaScript事件处理程序传递参数的方法。通过使用闭包返回一个函数,可以在触发事件时携带所需的参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在一个结构良好的网页中,不仅要做到结构和表现的分离,而且应该做到结构和逻辑的分离。这里的逻辑通常就是指在页面中使用的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被点击时就会正确的传递参数了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值