1、首先打开html编辑器，新建一个html文件，里面写入4个li标签，并在上方的style标签中设置li的样式，给li标签高度和宽度以及边框，同时设置li标签之间的间隔。
2、然后在script标签中写入js，首先用getElementsByTagName获取所有li标签的dom元素，任何使用for循环遍历数组中的元素，for循环内部设置每个li标签的index元素，在给每个元素添加点击事件，点击之后就会弹出li标签的index值出来。
3、最后打开浏览器，点击其中的一个标签，就会弹出对应的li标签数值了。
12
3
4
5
document.addEventListener('click', funciont (event) {
if(event.target &&event.target.nodeName == 'BUTTON') {
event.targe// 就是这个家伙点的，你要对它做什么就写这里.
}
})
针对页面上所有 button按钮
之所以突然想写这个文章，主要是之前看到一篇有意思的博文， 《探究点击事件在JavaScript事件循环中的表现》 ，有趣的地方在于JS点击事件加入回调的 并不是点击事件的回调方法 ，而是点击事件本身 (点击位置等描述点击的) 。
当我们连续点击 button.a 两次的时候，结果却是
明明是点击的 button.a ，为什么会触发 button.b 的事件？
无论通过 onclick 还是 addEventListener 实现事件绑定，我怀疑绑定机制是一样的，因为在实际测试中，我发现 onclick 执行顺序和 addEventListener 是一样的，也就是什么时候绑定，那么就在第几个执行。
addEventListener 和 onclick 不同，不是直接给 dom 绑定属性，并且我在 dom 节点上也没有看到任何相应的对象用于保存事件，可见 addEventListener 是不同的机制，参考 EventEmitter ，试着去实现一个 addEventListener
通过上面分析，总结一下
