Js迴圈繫結事件處理
阿新 • • 發佈：2019-02-04
很多時候我們在開發過程需要for迴圈給元素組繫結js事件，但是直接敲的話，事件響應的效果只能和最後一個元素一樣，如下面的錯誤程式碼：
這是js閉包的經典運用場景，有多種方法解決它。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js閉包運用</title> </head> <body> <button>1</button> <button>2</button> <button>3</button> </body> </html> <script> var btn=document.getElementsByTagName('button'); for(var i=0;i<3;i++){ btn[i].onclick=function(){ console.log(i); } } </script>
第一種，可以利用(function)()，如下改進程式碼：
<script>
var btn=document.getElementsByTagName('button');
for(var i=0;i<3;i++){
(function(val){
btn[i].onclick=function(){
console.log(val);
}
})(i);
}
</script>第二種方法：寫多一個函式，在該函式寫一個閉包，js程式碼如下：
第三種 可以利用jquert的$.each()<script> var btnshow=function(val){ return function(){ console.log(val); } } var btn=document.getElementsByTagName('button'); for(var i=0;i<3;i++){ btn[i].onclick=btnshow(i); } </script>
<script>
$(function(){
btn=document.getElementsByTagName('button');
$.each([0,1,2],function(index,value){
btn[value].onclick=function(){
console.log(value);
}
})
})
</script>