点击每个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的元素也会执行这个代码。
好了，这个简单的题目就讲解到这里了，不同的面试对这道题会有一定程度的改变，不过只要理解了相关的知识就不怕应付千变万化啦~
点击每个li输出里面的内容（前端很常问的面试题之一）的更多相关文章
- ASP.NET压缩输出的HTML内容
在ASP.NET中,怎么压缩输出的HTML内容,怎么替换HTML中的换行符,空白,TAB等符号呢? 1.新建一个基类,继承自System.Web.UI.Page,代码如下: using System. ...
- 点击每个li节点，都弹出其文本值及修改
点击每个li节点,都弹出其文本值 1,获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2,使用for循环进行遍 ...
- jq获取当前点击的li是ul中的第几个？
<script> var navulsize = $('.navul li').size(); var navulwidth = $('.navul li').wid ...
- 点击li，点击的li添加class，其余去掉class
点击li,点击的li添加class,其余去掉class <script type="text/javascript"> $(function () { var liob ...
- WCF 在VS中，添加服务引用，地址输入http://ip/Service.svc，点击前往，提示错误，内容如下：
WCF的service端的webconfig如下: <?xml version="1.0"?> <configuration> <system.ser ...
- XML解析之sax解析案例（一）读取contact.xml文件，完整输出文档内容
一.新建Demo2类: import java.io.File; import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPar ...
- 004 作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）
1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...
- Linux nl --让输出的文件内容自动加上行号
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- 鼠标点击input框后里面的内容就消失
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- NOI题库分治算法刷题记录
今天晚自习机房刷题,有一道题最终WA掉两组,极其不爽,晚上回家补完作业欣然搞定它,特意来写篇博文来记录下 (最想吐槽的是这个叫做分治的分类,里面的题目真的需要分治吗...) 先来说下分治法 分治法的设 ...
- Oracle参数化查询
Oracle参数化查询默认是根据顺序绑定的 select * from table where name=:p1 and (select id from table2 where name=:p1); ...
- SPOJ GSS2 Can you answer these queries II
Time Limit: 1000MS Memory Limit: 1572864KB 64bit IO Format: %lld & %llu Description Being a ...
- 分布式ID生成器
最近会写一篇分布式的ID生成器的文章,先占位.借鉴Mongodb的ObjectId的生成: 4byte时间戳 + 3byte机器标识 + 2byte PID + 3byte自增id 简单代码: imp ...
- 加州大学伯克利分校Stat2.3x Inference 统计推断学习笔记: Section 4 Dependent Samples
Stat2.3x Inference(统计推断)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...
- （转载）最长递增子序列 O(NlogN)算法
原博文:传送门 最长递增子序列(Longest Increasing Subsequence) 下面我们简记为 LIS. 定义d[k]:长度为k的上升子序列的最末元素,若有多个长度为k的上升子序列,则 ...
- 《C陷阱与缺陷》杂记
第一章 词法"陷阱" 1.4整型常量 如果一个整型常量的第一个字符是数字0,那么该常量将被视作八进制数.因此,10与010的含义截然不同.需要注意这种情况,有时候在上下文为了格式& ...
- android service 本地 远程 总结
android编写Service入门 android SDK提供了Service,用于类似*nix守护进程或者windows的服务. Service有两种类型: 本地服务(Local Service) ...
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
- JS-百钱买百鸡案例-for循环制作
<html> <head> <meta charset="utf-8"/> <title></title> <sc ...