点击每个li输出里面的内容（前端很常问的面试题之一）
点击每个li输出里面的内容（前端很常问的面试题之一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click事件的几种写法</title>
</head>
<body>
<ul id="parent">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
<li>第7个</li>
</ul>
<script>
var ul = document.getElementById('parent');
var li = ul.getElementsByTagName('li');
</script>
</body>
</html>
这是一道很常见的前端面试题，让你点击每个li输出里面相应的内容，今天就来给大家放上我最常用的三种方法，并解释里面用到的知识点~
第一种
function Closure() {
for(var i = 0; i < li.length; i++) {
(function(j){
li[j].onclick = function() {
console.log(li[j].innerHTML);
}
})(i);
}
}
第一种方法是使用吃掉闭包的方法，因为onclick的异步执行导致只能输出第li.length个li内部的文字，但因为并没有第li.length个li所以代码并不会输出（可以去掉代码内部的立即执行函数进行实验）。加入立即执行函数就延长了click事件的活动对象，强制使代码符合预期。
关于闭包
第二种
function This() {
for(var j = 0; j < li.length; j++) {
li[j].onclick = function() {
console.log(this.innerHTML);
}
}
}
第二种方法是使用this的原理，因为对于this的隐式绑定来说，this指向的是调用位置上的包含对象，也就是你点击的那个li[i]。通过this的指向就可以轻松得到我们想要的答案了~
关于this
第三种
function eve() {
ul.onclick = function(eve) {
if(eve.target.tagName.toLowerCase() === 'li') {
console.log(eve.target.innerHTML);
}
}
}
第三种使用的是事件代理以及event事件的内置属性来达到效果。事件代理不必再细说了，就是因为浏览器的事件冒泡机制将事件绑定在发生事件的上级元素上。因为event事件有很多属性及方法，在这里插播列举一下这些方法吧
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| bubbles | Boolean | 表示事件是否冒泡 |
| cancelable | Boolean | 表示是否可以取消事件的默认行为 |
| currentTarget | Element | 表示事件处理程序当前正在处理的那个元素 |
| defaultPrevented | Boolean | 为true表示已调用了preventDefault() |
| detail | Integer | 与事件相关的细节信息 |
| eventPhase | Integer | 调用事件处理程序的阶段：1表示捕获阶段，2表示‘处于目标’，3表示冒泡阶段 |
| preventDefault() | Function | 取消事件的默认行为 |
| stopImmediatePropagation() | Function | 取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用 |
| stopPropagation() | Function | 取消事件的进一步捕获或者冒泡 |
| target | Element | 事件的目标元素 |
| trusted | Boolean | 为true表示事件是浏览器生成的，为false表示事件由开发人员通过JavaScript创建的 |
| type | String | 被触发事件的类型 |
| view | AbstractView | 与事件相关的抽象视图 |
在这个需求中我们只需要使用eve.target这个属性就能获得你点击的目标元素。if的判断是避免绑定事件的元素下级还有其他不是li的元素也会执行这个代码。
好了，这个简单的题目就讲解到这里了，不同的面试对这道题会有一定程度的改变，不过只要理解了相关的知识就不怕应付千变万化啦~
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？