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

原创于 2017-06-08 10:21:27 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #事件代理 #let #delegate #on

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文介绍了在JavaScript中点击li元素获取innerHTML的三种方法，包括传统的直接绑定事件方式、利用事件委托的事件代理方法，以及使用ES6的let声明。此外，还提及了jQuery中的delegate和on方法，它们同样具有事件代理功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
});