addEventListener怎么动态传入带参数函数？

Question

有个未采纳的「潇潇雨歇」的答案，也有用，只是我现在还不知道let的具体用法。在此表示歉意，我也好想采纳两个。

结果肯定是
click button1 alert(3)
click button2 alert(3)

怎么修改代码使得
click button1 alert(1)
click button2 alert(2)

感觉这个问题跟settimeout的闭包经典问题有点像，但是我又想不到什么解决办法。

求指点。

Answer 1

function myclick(i){
    return function(){
         alert(i)
    }

第二个参数传myclick(i)

Answer 2

把参数保存在每个button元素的属性里。
或者用let

Answer 3

<button id='myButton1' data-info='abc'></button> 点击按钮后，获得button的属性data-info中的属性

Answer 4

jquery一般来说就是操作DOM，渲染的时候拼接在dom上一般是data-*的格式，然后获取出来再用$(this).attr(key)

Answer 5

将var 改为 let 即可

 window.onload = function () {
      for (let i = 1; i < 3; i++) {
        document.getElementById('myButton' + i)
          .addEventListener('click', () => {
            myClick(i)
          })
      }
    }

Answer 6

利用闭包思想,内部函数包含数据,外部函数在return内部函数

Answer 7

for(var i=0;i<10;i++){
    (function(i){
        document.getElementById('myButton' + i).addEventListener('click',myclick(i))
    })(i)
}

ES6的话，可以直接用

for(let i=0;i<10;i++){
   document.getElementById('myButton' + i).addEventListener('click',myclick(i))
}

Answer 8

运用闭包或者ES6 let关键字