面试题：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy。

看到这个题目，我们一般首先想到的思路是，for循环，遍历1000次。这样的话1000次的循环，效率很低，如何提高。

可以考虑利用事件冒泡特性提高效率。主要是利用事件代理。

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。

为什么要这么做？众所周知，DOM操作是十分消耗性能的，所以重复的事件绑定简直是性能杀手。而事件代理的核心思想，就是通过尽量少的绑定，去监听尽量多的事件。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>hehe</title>

</head>

<body>

<div>

<ul id="ulItem">

<li id="li1">1</li>

<li id="li2">2</li>

<li id="li3">3</li>

<li id="li4">4</li>

<li id="li5">5</li>

<li id="li6">6</li>

<li id="li7">7</li>

<li id="li8">8</li>

<li id="li9">9</li>

<li id="li10">10</li>

<li id="li11">11</li>

...

<li id="li1000">1000</li>

</ul>

</div>

<script type="text/javascript">

var ulItem = document.getElementById("ulItem");

ulItem.onclick = function(e){

e = e || window.event;//这一行及下一行是为兼容IE8及以下版本

var target = e.target || e.srcElement;

if(target.tagName.toLowerCase() === "li"){

alert(target.innerHTML);

alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);

}

}

function getElementPosition(e){

var x=0,y=0;

while(e != null){

x += e.offsetLeft;

y += e.offsetTop;

e = e.offsetParent;

}

return {x:x, y:y};

}

</script>

</body>

</html>

关于JavaScript中的事件代理（例子：ul中无数的li上添加点击事件）的更多相关文章

  1. 如何在UILable上添加点击事件？

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  2. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  3. openlayers上添加点击事件

    有很多场景会有这个需求,就是我绘制了图标,点击图标需要展示一些对应的信息 openlayer的事件主要是通过监听来完成的,你所有的icon的点击事件都是可以通过监听map的点击事件来处理对应的逻辑的 ...

  4. 为所有的Ul下的li标签添加点击事件

  5. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  6. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  7. [Swift通天遁地]一、超级工具-(1)动态标签：给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  9. 使用for循环添加点击事件时，获取i值的方法

    比如页面上有一个ul,数个li,现在给li添加点击事件. var li = document.getElementsByTagName("li"); for(var i = 0; ...

随机推荐

  1. 今天实现一个T-sql的小编程，分享给大家，看看就好~（列值赋值）

    介绍:将一个表的某列值插入到另一个表的列里,暂定为表aa和表nn DECLARE @a int set @a=1 while @a<nn.列1.length    --(注:语法不对你可以用查询 ...

  2. Murano 网址一览

    [Murano_Meeting] http://eavesdrop.openstack.org/#Murano_Meeting [Murano_Meeting_Agenda] https://wiki ...

  3. Hadoop实战：明星搜索指数统计，找出人气王

    项目介绍 本项目我们使用明星搜索指数数据,分别统计出搜索指数最高的男明星和女明星. 数据集 明星搜索指数数据集,如下图所示.猛戳此链接下载数据集 思路分析 基于项目的需求,我们通过以下几步完成: 1. ...

  4. Mybatis的小计

    1连接池 一 我的错误想法 poolMaximumIdleConnections 最大活跃连接数 poolMaximumActiveConnections 最大空闲连接数 我一直以为 空闲是一直存在的 ...

  5. 在spark2中的shell使用python3

    在spark2中的shell使用python3 spark2.0.0中的python默认使用python2,可以通过以下两种方式之一使用python3: PYSPARK_PYTHON=python3 ...

  6. weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架

    写在前面的话: weex官方文档不完善,在整个实施过程中遇到过很多坑,中途几次想放弃,总是有些不甘心.攻坚克难,总也是会有一些收获,先将收获进行分享也或是记录,防止忘记.要想用好weex必须对es5/ ...

  7. 零基础逆向工程30_Win32_04_资源文件_消息断点

    1 资源文件,创建对话框 详细步骤: 1.创建一个空的Win32应用程序 2.在VC6中新增资源 File -> New -> Resource Script 创建成功后会新增2个文件:x ...

  8. linux nginx 404错误页面设置

    配置nginx 实现404错误 返回一个页面 1.配置nginx.conf 在http代码块 添加 fastcgi_intercept_errors on; 2.在网站的sever代码块 添加 err ...

  9. 关于echarts和jqeury的结合使用问题

    今天在工作上遇到了一个小问题,就是自己在用echarts渲染了一个柱状图,然后点击其他位置,将渲染echart的div进行了清空,这里我所有的echart图形都是在同一个div中渲染的,然后当再次要求 ...

  10. TCP 协议中的 Window Size与吞吐量

    原地址:http://blog.sina.com.cn/s/blog_c5c2d6690102wpxl.html TCP协议中影响实际业务流量的参数很多,这里主要分析一下窗口的影响. ​TCP窗口目的 ...