点击li输出其innerHTML的几种方法

html代码如下：

<ul id="lll"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

js实现方法： 1.传统方法

var ul = document.getElementById("lll"); lis = ul.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ lis[i].onclick = function(){ alert(this.innerHTML); } }

2.（事件委托）事件代理

var ul = document.getElementById("lll"); ul.addEventListener("click", function(event){ event = event || window.event; var target = event.target || event.srcElement; alert(target.innerHTML); }, false);

3.ES6——let声明 注：let声明的变量具有块级作用域

var ul = document.getElementById("lll"); lis = ul.getElementsByTagName("li"); for(let i=0; i<lis.length; i++){ lis[i].onclick = function(){ alert(this.innerHTML); } }

4.jQuery——delegate或on （都有事件代理的特性）

$("#lll").delegate("li", "click", function(){ alert($(this).html); }); $("#lll").on("click", "li", function(){ alert($(this).html); });