js為li列表新增點選事件
阿新 • • 發佈：2019-01-09
今天看到一個面試題目
//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 想給每個li新增點選事件，並打印出當前的index值。
很明顯這樣寫並沒有實現最終的結果。不管點選哪一個li都只打印了一個結果就是3。並沒有得到我們想要的。到底什麼原因呢？
onclick是一個事件，這個事件委託了並沒有去觸發，只有觸發的時候才會呼叫回撥函式，程式碼自上而下執行這時候i的值已經變為3了所以每個點選事件的回撥結果都是3。那麼如何去實現呢？看如下程式碼
var oli = document.getElementsByTagName("li");
for(var i=0; i<oli.length; i++){
（function 這樣的話點選不同的li就會列印對應的Index值。
說白了就是改變i的作用域，保留他的值，因為上面的程式碼i的作用域是全域性的，所以列印的結果都是3，現在是作為實參傳遞到匿名函式當中，並呼叫，變成形參寫到了事件當中，這樣就改變掉了他的作用域，也就是將他原來有的值保留了下來。所以結果就是列印對飲的index值