点击每个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> ...
随机推荐
- Android NDK学习之第一个实例---端口扫描
为什么要写一个端口扫描的程序,Java来写不是很方便吗?因为我也没有想到什么例子能够方便的来练习.于是想到以前找到的端口扫描的C代码,于是想用他们来练习.扫描服务端端口的方式有许多种,最简单的就是直接 ...
- linux 中php以及nginx的重启命令
关闭php killall php-fpm 注意:php关闭之前,使用ps aux|grep 'php' 查看一下php的服务及进程 php重启 /usr/local/php/sbin/php-fpm ...
- python 生成器和递归
生成器 1.定义 问题:python会把对象放到内存中,我们每次定义变量.列表等都会在内存中占用对应的地址块,所以当内存容量一定时,列表的容量会受到内存的限制,而且假如我们创建了一个包含200万个元素 ...
- C#常用异常类记录
从MSDN抄下来的 ArgumentException 传递到方法的非空参数是无效的. ArgumentNullException 传递给方法的参数为空. ArgumentOutOfRangeExc ...
- VS2012使用NUGet自动下载(还原)项目中使用的包
一: 当签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原". 二: 出现询问,当然要点是,当完成后,会发现在解决方案中,多出".nuget" ...
- 我总结的js性能优化的小知识
前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己 ...
- Web Worker
写在前面 众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况 ...
- Python核心编程第三版第二章学习笔记
第二章 网络编程 1.学习笔记 2.课后习题 答案是按照自己理解和查阅资料来的,不保证正确性.如由错误欢迎指出,谢谢 1. 套接字:A network socket is an endpoint of ...
- linux系统判断是否重启、关机、查询登录诊断分析简介
Last reboot这个命令是查看每次系统重启的信息 [root@dg01 log]# last rebootreboot system boot 2.6.32-300.10.1. Thu May ...
- JavaScript学习笔记——变量和数据类型
一.javascript命名规范 1. 严格区分大小写 2. 变量的命名必须以字母或 _或 $开头,余下的部分可以是任意的字母,数字,或者是 _或者是$ 3.不能用关键字或者是保留字命名. 4.jav ...