点击每个li输出里面的内容（前端很常问的面试题之一）

前端
面试
JavaScript
<!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事件有很多属性及方法，在这里插播列举一下这些方法吧

DOM事件成员属性方法
属性/方法 类型 说明
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输出里面的内容（前端很常问的面试题之一）的更多相关文章

  1. ASP.NET压缩输出的HTML内容

    在ASP.NET中,怎么压缩输出的HTML内容,怎么替换HTML中的换行符,空白,TAB等符号呢? 1.新建一个基类,继承自System.Web.UI.Page,代码如下: using System. ...

  2. 点击每个li节点，都弹出其文本值及修改

    点击每个li节点,都弹出其文本值 1,获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2,使用for循环进行遍 ...

  3. jq获取当前点击的li是ul中的第几个？

    <script> var navulsize = $('.navul li').size();            var navulwidth = $('.navul li').wid ...

  4. 点击li，点击的li添加class，其余去掉class

    点击li,点击的li添加class,其余去掉class <script type="text/javascript"> $(function () { var liob ...

  5. WCF 在VS中，添加服务引用，地址输入http://ip/Service.svc，点击前往，提示错误，内容如下：

    WCF的service端的webconfig如下: <?xml version="1.0"?> <configuration> <system.ser ...

  6. XML解析之sax解析案例（一）读取contact.xml文件，完整输出文档内容

    一.新建Demo2类: import java.io.File; import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPar ...

  7. 004 作业二（单击弹跳li节点的每个文本节点的值；点击每个 li 节点, 若 li 节点的文本值没有 ^^ 开头, 加上，有，则去除）

    1.需求 点击每个 li 节点, 都弹出其文本值 2.程序 <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. Linux nl --让输出的文件内容自动加上行号

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  9. 鼠标点击input框后里面的内容就消失

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Beta版本——第一次冲刺博客

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  2. 北京地铁站点遍历最少经站次数问题普遍意义上是一个NP问题，目前不存在多项式时间算法能够解决该问题

    http://www.cnblogs.com/jiel/p/5852591.html 众所周知求一个图的哈密顿回路是一个NPC问题: In the mathematical field of grap ...

  3. PhyLab2.0需求与功能分析改进文档（NABCD）

    PhyLab1.0需求规格说明文档 1. 概述 1.1 项目概述 软剑攻城队小组于2015学年开发了PhyLab物理实验网站,一经发布好评如潮.网站的核心功能是提供预习报告和自动数据处理,而后加入了论 ...

  4. android service 本地 远程 总结

    android编写Service入门 android SDK提供了Service,用于类似*nix守护进程或者windows的服务. Service有两种类型: 本地服务(Local Service) ...

  5. BZOJ1004: [HNOI2008]Cards

    三维01背包算出在每一个置换下不变的染色方案数,Burnside引理计算答案. PS:数据太水所以只算恒等置换也是可以过的. #include<bits/stdc++.h> using n ...

  6. 【原】textarea 换行之间的转换

    在操纵表单的时候,如果你在textarea输入的内容是换行的,如果没有进行相应的装换,你输出的内容是不会跟着一起换行的.如果后台返回给你的数据是带有<br />换行符的, 那么在texta ...

  7. ASP.NET程序单客户端（浏览器）登录的实现方案

    需求描述:当用户的账户在另一个浏览器中登录的时候,需要把当前浏览器的登录强制下线.这种需求在业务系统,或付费视频服务网站中比较常见. 这种需求我称之为"单客户端(浏览器)"登录,与 ...

  8. 理解Linux系统/etc/init.d目录和/etc/rc.local脚本

       一.关于/etc/init.d 如果你使用过Linux系统,那么你一定听说过init.d目录.这个目录到底是干嘛的呢?它归根结底只做了一件事情,但这件事情非同小可,是为整个系统做的,因此它非常重 ...

  9. JavaWeb学习笔记——Ajax

  10. docker中启动mysql报错

    [root@5416ec39653b init.d]# /etc/init.d/mysqld start /etc/init.d/mysqld: line 23: /etc/sysconfig/net ...