面试题：一个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. inode与block

    1.   inode 是索引节点,在每个Linux存储设备或者存储设备的分区被格式化为ext4文件系统,一般生成两个部分:第一部分为inode,第二部分为block        inode:存放的是 ...

  2. myeclipse9.0安装svn插件

    先得保证myeclipse9.0是可以正常使用的吧. 第一步当然是从网上下载SVN插件啦.myeclipse9.0集成的eclipse版本是属于3.x,所以下载eclipse3.x系列的SVN插件. ...

  3. js如何删除json里的值

    思路 第一种方法:通过把json中需要的值取出来,重新生成json对象,这种方法比较笨 第二种方法:通过delete 删除属性,这种方法比较常用,在第三方js库中经常能看到,推荐 举例 1 2 3 4 ...

  4. Jenkins之自动触发部署之插件Generic Webhook Trigger Plugin

    一.安装好插件 二.构建触发器会出现设置trigger的入口 三.设置的两个部分 第一: Jenkins的这个触发器,这里主要是接受post数据.其中Post content parameters是用 ...

  5. Spring和springMVC父子容器的关系

    部分转载自:https://www.cnblogs.com/ljdblog/p/7461854.html springMVC容器和Spring容器 为什么一定要在web.xml中配置spring的li ...

  6. mfc 列表控件

    经常使用的mfc控件:list control,记录下   首先将list control拖入到对话框中,然后命名ID,通过类向导,类型为control,控件变量名(m_showlist),  vie ...

  7. ACdream 1216——Beautiful People——————【二维LIS，nlogn处理】

    Beautiful People Special Judge Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (J ...

  8. [LeetCode]10. Regular Expression Matching正则表达式匹配

    Given an input string (s) and a pattern (p), implement regular expression matching with support for ...

  9. 程序运行的cpu时间

    time.clock() 测量CPU时间,比较精准,通过比较程序运行前后的CPU时间差,得出程序运行的CPU时间.

  10. NGSL + NAWL 单词表 以及学习网站

    https://quizlet.com/44769538/nawl-1-1-50-flash-cards/ NAWL 网站 NAWL 单词表  + NGSL 单词表 http://www.newgen ...