移除行内onclick改用addEventListener时如何传递正确的参数序列

以下是几种可直接落地的实现方式，不需要修改原有clear_input函数的逻辑：

方法1：匿名函数包装（最常用，适配2个按钮的简单场景） #

直接在事件回调的匿名函数中调用clear_input并传入对应参数，代码如下：

// 先获取两个按钮元素
const btn1 = document.getElementById('button1');
const btn2 = document.getElementById('button2');

// 分别绑定点击事件
btn1.addEventListener('click', function() {
  clear_input('button1', 'hello1', 'world1');
});
btn2.addEventListener('click', function() {
  clear_input('button2', 'hello2', 'world2');
});

注意：不要直接写addEventListener('click', clear_input('button1', 'hello1', 'world1'))，这种写法会立即执行函数，不会作为事件回调触发

方法2：bind绑定参数 #

使用Function.prototype.bind预先传入参数生成新的回调函数：

const btn1 = document.getElementById('button1');
const btn2 = document.getElementById('button2');

// bind第一个参数为函数内this指向，不需要的话可传null，后续参数按顺序传入clear_input
btn1.addEventListener('click', clear_input.bind(null, 'button1', 'hello1', 'world1'));
btn2.addEventListener('click', clear_input.bind(null, 'button2', 'hello2', 'world2'));

方法3：自定义数据属性（适合按钮数量多的批量绑定场景） #

先在HTML按钮元素上新增data-*自定义属性存储参数，不用单独给每个按钮写绑定逻辑：

<!-- 给按钮新增统一类名和自定义参数属性 -->
<button id="button1" class="clear-btn" data-a="button1" data-b="hello1" data-c="world1">按钮1</button>
<button id="button2" class="clear-btn" data-a="button2" data-b="hello2" data-c="world2">按钮2</button>

JS中批量绑定：

document.querySelectorAll('.clear-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 从当前点击按钮的数据集取参数
    clear_input(this.dataset.a, this.dataset.b, this.dataset.c);
  })
})

内容的提问来源于stack exchange，提问作者mariabatool