js为li列表添加点击事件
生活随笔
收集整理的這篇文章主要介紹了
js为li列表添加点击事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天看到一個面試題目
//html代碼 <body><ul><li>1</li><li>2</li><li>3</li></ul> </body> //js代碼 var oli = document.getElementsByTagName("li");for(var i=0; i<oli.length; i++){oli[i].onclick = function () {alert(i);};想給每個li添加點擊事件，并打印出當前的index值。
很明顯這樣寫并沒有實現最終的結果。不管點擊哪一個li都只打印了一個結果就是3。并沒有得到我們想要的。到底什么原因呢？
onclick是一個事件，這個事件委托了并沒有去觸發，只有觸發的時候才會調用回調函數，代碼自上而下運行這時候i的值已經變為3了所以每個點擊事件的回調結果都是3。那么如何去實現呢？看如下代碼
這樣的話點擊不同的li就會打印對應的Index值。
說白了就是改變i的作用域，保留他的值，因為上面的代碼i的作用域是全局的，所以打印的結果都是3，現在是作為實參傳遞到匿名函數當中，并調用，變成形參寫到了事件當中，這樣就改變掉了他的作用域，也就是將他原來有的值保留了下來。所以結果就是打印對飲的index值
總結
以上是生活随笔為你收集整理的js为li列表添加点击事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA Web day01--- An
- 下一篇： 开源代码学习之persepolis【二】