点击弹出对应标签的序号

先上代码

let i, a
for (i = 0; i < 10; i++) {
  a = document.createElement('li')
  a.innerHTML = i + 1
  a.i = i
  a.addEventListener('click', function (e) {  //这个地方不能用箭头函数，否则this会变成Window
    e.preventDefault() //取消默认事件
    console.log(e,this)
    alert(this.i)
  })
  document.body.appendChild(a)
}

这个题目的重点是不能直接alert（i），因为你直接alert （i）。click函数里面没有i。他会向上级作用域去查找，找到全局作用域的i。而这时候i已经循环完了，你不管点哪个标签弹出来的都是9.
所以我们需要给每一个a节点都绑定一个i属性，然后通过this访问。
那么this取什么值是执行的时候确定的，也就是说你点击哪个a节点this就是那个a节点。
由作用域的知识引出方法2：
上代码：

let  a
for (let i = 0; i < 10; i++) {
  a = document.createElement('li')
  a.innerHTML = (i+1)
  /* a.i = i */
  a.addEventListener('click', function (e) {  //这个地方不能用箭头函数，否则this会变成Window
    e.preventDefault() //取消默认事件
    console.log(e,this)
    alert(i+1)
  })
  document.body.appendChild(a)
}

ES6的let语法在这里可以形成块级作用域，因此i每一次访问的都是for里面当时那个i