利用闭包实现onclick事件传递参数
生活随笔
收集整理的這篇文章主要介紹了
利用闭包实现onclick事件传递参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
當觸發點擊事件，一個簡單的例子。
<!DOCTYPE html> <html> <head><title>閉包創建數組</title><meta charset="utf-8"><script type="text/javascript">window.onload = function (){var lis = document.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {console.log(this.innerHTML);};}}</script> </head> <body><h2>閉包點擊事件</h2><ul><li>奔馳</li><li>寶馬</li><li>奧迪</li></ul> </body> </html>但是，當我想要得到循環外的變量值。
<!DOCTYPE html> <html> <head><title>閉包創建數組</title><meta charset="utf-8"><script type="text/javascript">window.onload = function (){var lis = document.getElementsByTagName('li');var price = [1, 10, 100];for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {console.log(this.innerHTML+ '的價格:' + price[i]);};}}</script> </head> <body><h2>閉包點擊事件</h2><ul><li>奔馳</li><li>寶馬</li><li>奧迪</li></ul> </body> </html>
由于當我點擊的時候，i的值已經是3了，所以會undefined。現在的問題就是怎么才能在每次循環中把i的值保存下來。
閉包的經典回答應該是：延長局部變量的生命周期
總結
以上是生活随笔為你收集整理的利用闭包实现onclick事件传递参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL Server数据库设置自动备份策
- 下一篇： Bootstrap 5款常用模板