経典js問題

5212 ワード

javascript js。

経典js問題

    var list = document.getElementsByTagName("li");  

    function foo(){  
        for(var i = 0, len = list.length; i < len; i++){  
            list[i].onclick = function(){  
                alert(i + "----" + this.innerHTML);  
            }  
        }  
    }  
    foo();

私達は運行結果がlist.lengthであることを発見します.これはブロックレベルの作用領域がないためです.解決方法はいくつかあります.
1.クローズドを使う

var list = document.getElementsByTagName("li");  

function foo(){  
    for(var i = 0, len = list.length; i < len; i++){  
        var that = list[i];  
        list[i].onclick = (function(k){  
            var info = that.innerHTML;  
            return function(){  
                alert(k + "----" + info);  
            };  
        })(i);  
    }  
}  
foo();

2.クローズドを使う
var list=document.getElements ByTagName(「li」)
function foo()｛use strict’for(let i=0,len=list.length;i3.イベント依頼

var myul = document.querySelector('ul');  
var list = document.querySelectorAll('ul li');  

myul.addEventListener('click', function(ev){  
    var ev = ev || window.event;  
    var target = ev.target || ev.srcElemnt;  

    for(var i = 0, len = list.length; i < len; i++){  
        if(list[i] == target){  
            alert(i + "----" + target.innerHTML);  
        }  
    }  
});

4.jqueryのdelegateとonを使ってイベントバインディングを行う

<script type="text/javascript">  

$("ul").delegate("li", "click", function(){  
    var index = $(this).index();  
        var info = $(this).html();  
    alert(index + "----" + info);  
});  

script>  

<script type="text/javascript">  

$("ul").on("click", "li", function(){  
    var index = $(this).index();  
        var info = $(this).html();  
    alert(index + "----" + info);  
});  

script>

クローズドの基礎作用領域