点击每个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> ...
随机推荐
- Linux GDB Debugging
Catalog . GDB Introduction . GDB基本命令 1. GDB Introduction GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具,GDB主要可帮助工程师 ...
- linux下制作win7安装盘（mint、ubuntu、debian）
今天替同事装系统.因为现在的debian系系统都可以直接用dd拷贝iso到u盘的方法进行安装,所以,想当然的用dd来制作windows安装盘.没反应!所以有了下面的方法. 1. 将u盘格式化为ntfs ...
- 页面记载给绑定query的grid加filter
功能名称:listDataAction 切入类型:before 事件名称:com.kingdee.bos.webframework.dynamic.event.view.WebListDataEven ...
- [Java 实现AES加密解密]
今天同学请教我这个问题,被坑了次…… 实现的功能是2个Java类:一个读取源文件生成加密文件,另一个类读取加密文件来解密. 整个过程其实很简单,java有AES的工具包,设好秘钥,设好输入内容,就得到 ...
- PHP中的一个”坑“
说一个极有可能在工作中遇到的问题——foreach的引用 foreach $arr = range(1,3); //[1,2,3] foreach($arr as &$val) { } for ...
- C++ 之const Member Functions
Extraction from C++ primer 5th Edition 7.1.2 The purpose of the const that follows the parameter lis ...
- 数据结构1 线段树查询一个区间的O(log N) 复杂度的证明
线段树属于二叉树, 其核心特征就是支持区间加法,这样就可以把任意待查询的区间$[L, R]$分解到线段树的节点上去,再把这些节点的信息合并起来从而得到区间$[L,R]$的信息. 下面证明在线段树上查询 ...
- .net图片验证码生成、点击刷新及验证输入是否正确
①创建ValidateCode.aspx,在ValidateCode.aspx.cs中加入如下代码.生成验证码图片,在页面上输出,输出jpeg格式. protected void Page_Load( ...
- UVALive 3989Ladies' Choice(稳定婚姻问题)
题目链接 题意:n个男生和女生,先是n行n个数,表示每一个女生对男生的好感值排序,然后是n行n列式每一个男生的好感值排序,输出N行,即每个女生在最好情况下的男生的编号 分析:如果是求女生的最好情况下, ...
- 【原】ajaxupload.js上传报错处理方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...