实现五个按钮,点击事件,输出哪个按钮被点击了;
<!DOCTYPE html>
<html>
<body>
<div id="app">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue(
{el:"#app",
data:{
},
methods:{
},
computed:{
}
})
// 错误方式,var没有作用域,i加到5后就一直不变了
var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++)
{
btns[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被按');
})
}
// 方式一,通过function的作用域实现
// var btns=document.getElementsByTagName('button');
// for(var i=0;i<btns.length;i++)
// { (function (num)
// {
// btns[i].addEventListener('click',function(){
// console.log('第'+num+'个按钮被按');
// })
// }
// )(i)
// }
// 方式二,es6的let有作用域
var btns=document.getElementsByTagName('button');
for(let i=0;i<btns.length;i++)
{
btns[i].addEventListener('click',function(){
console.log('第'+i+'个按钮被按');
})
}
</script>
</body>
</html>
正确结果:
错误结果: