给addEventListener调用函数加参数方法

本文介绍如何使用JavaScript的setAttribute方法为DOM元素添加自定义属性,并通过addEventListener方法监听点击事件。文中展示了两种方式:一是将参数作为属性值传递并在事件处理函数中获取这些值;二是直接将参数传递给事件处理函数。

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

一、用setAttribute()为元素增添属性,把要传递的参数赋给属性值;然后在所调用函数中加事件参数,如下:

deleteTaskk = document.createElement("a");
ii="3";
color="red"
deleteTaskk.setAttribute("moto", ii);
deleteTaskk.setAttribute("color", color);
deleteTaskk.addEventListener("click", deleteTaskCookie, false);
document.appendChild(deleteTaskk);

function deleteTaskCookie(e){//e是事件对象,使用e.target既定义对象,又可以得到触发本事件的元素。
mycase=e.target
ii=mycase.getAttribute("moto");
color=mycase.getAttribute("color");

.....................


}
二、直接让addEventListener调用带参数的函数,然后在所调用函数中返回匿名函数。如下:

deleteTaskk = document.createElement("a");
ii="3";
color="red"
deleteTaskk.addEventListener("click", deleteTaskCookie(ii,color), false);
document.appendChild(deleteTaskk);

function deleteTaskCookie(i,colo){
  return function(){
XXXXX(i)
XXXXXX(colo)
.....................

  }
}
转载出处:http://g.mozest.com/thread-31048-1-1
### 使用 `addEventListener` 传递参数方法 当希望向通过 `addEventListener` 注册的事件处理程序传递额外参数时,有几种常见方法可以实现这一目标。 #### 方法一:使用匿名函数包裹需调用的函数并传递参数 这种方法允许直接在添监听器的地方定义一个立即执行的小型匿名函数,在其中调用实际的目标函数,并附上所需的参数。这使得可以在不改变原有逻辑的情况下轻松地为事件处理器提供外部数据[^1]。 ```javascript var message = "Hello JavaScript"; input.addEventListener('click', function(event) { update(message); }); function update(msg) { console.log(msg); // 输出: Hello JavaScript } ``` #### 方法二:利用闭包特性创建具有记忆功能的新函数 此方式涉及构建一个新的函数实例来保存特定环境下的变量值(即要作为参数传递的数据),从而形成所谓的“闭包”。每当触发相应事件时,这个新生成的函数就会携带这些预设好的参数一起被执行[^2]。 ```javascript mainNode.addEventListener('keydown', (e) => _bindEventListener(e)); function _bindEventListener(event) { mainNodeHandle(event, props); } // 或者更简洁的形式如下所示: backTop.addEventListener('click', () => reuse(0)); ``` #### 方法三:借助箭头函数简化语法结构 对于现代浏览器支持的情况而言,还可以采用 ES6 引入的箭头函数表达式进一步精简代码量。它不仅能够保持上下文中的 this 值不变,而且其紧凑形式非常适合用来快速编写带有固定输入参数的一次性回调函数[^3]。 ```javascript function reuse(data) { window.scroll({ top: data, behavior: 'smooth' }); } backTop.addEventListener('click', () => reuse(0)); // 点击返回顶部按钮平滑滚动到页面顶端 ``` 以上三种方案均可有效解决 `addEventListener` 的参数传递问题,开发者可以根据具体应用场景和个人偏好选择最合适的方式实施。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值