点击每个列表项显示对应列表项里面的内容

用三种方法实现了点击列表项，输出列表项中的内容。

现有如下列表：

1 <ul id="myLinks">
2     <li id="go">Go somewhere</li>
3     <li id="do">Do something</li>
4     <li id="say">Say hello</li>
5 </ul>

方法一：事件代理

//方法一：使用事件代理
    var myLinks = document.getElementById('myLinks');
    myLinks.onclick = function(event){
        if(event.target.nodeName.toLowerCase() === 'li'){
            console.log(event.target.innerHTML);
        }
    }

方法二：this

1 //方法二：this
2     var myLinks = document.getElementById('myLinks');
3     var lis = myLinks.getElementsByTagName('li');
4     for(var i = 0; i < lis.length; i++){
5         lis[i].onclick = function(){
6             console.log(this.innerHTML);
7         }
8     }

方法三：利用闭包

 1 //方法三:闭包
 2     var myLinks = document.getElementById('myLinks');
 3     var lis = myLinks.getElementsByTagName('li');
 4     for(var i = 0; i<lis.length;i++){
 5         (function(j){
 6             lis[j].onclick=function(){
 7                 console.log(lis[j].innerHTML)
 8             }
 9         })(i)
10     }

posted on 2016-07-23 10:07 zuimei001 阅读(678) 评论(0) 编辑收藏举报