面试题：一个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. 自定义标签遇到的问题unable to load tag handler class "XX" for tag "XX"

    xxxx.tld文件的<tag-class>路径不正确,当时把until写成util了 摘自:http://zhidao.baidu.com/link?url=HP4tjHit2EXokI ...

  2. UVa 10652（旋转、凸包、多边形面积）

    要点 凸包显然 长方形旋转较好的处理方式就是用中点的Vector加上旋转的Vector,然后每个点都扔到凸包里 多边形面积板子求凸包面积即可 #include <cstdio> #incl ...

  3. 2017 ACM/ICPC Asia Regional Shenyang Online card card card

    题意:看后面也应该知道是什么意思了 解法: 我们设置l,r,符合条件就是l=起始点,r=当前点,不符合l=i+1 学习了一下FASTIO #include <iostream> #incl ...

  4. 【经验总结】tcp_tw_recycle参数引发的故障

    tcp_tw_recycle参数引发的故障 By Eric 故障描述: 2010年9月7日,新上线的手机游戏论坛有部分地区用户反应登陆游戏时出现不能登陆或登陆超时等情况,观察用户同时在线数量开始下降情 ...

  5. spark_load csv to hive via hivecontext

    //prepare csv year,make,model,comment,blank "2012","Tesla","S","N ...

  6. cocos

    cocos compile -p android --android-studio --app-abi=armeabi-v7a ./adb kill-server&& ./adb se ...

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

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

  8. mysql 链接时报错：1251-Client does not support authentication protocol requested by server

    一 原因是mysql服务器要求的认证插件版本与客户端不一致造成的. 二 由于我是最新的mysql和破解版的navicat,那么就是mysql太高级了. 解决方法有两个,我毫不犹豫的选择mysql降级. ...

  9. 19.CentOS7下PostgreSQL安装过程

    CentOS7下PostgreSQL安装过程 装包 sudo yum install postgresql-server postgresql-contrib 说明: 这种方式直接明了,其他方法也可以 ...

  10. Android客户端与PC服务端、android服务端通过WiFi通信

    前期准备:我的是Linux Mint操作系统(总之折腾的过程中怀疑过是不是系统的问题),首先是要创建wifi热点给android手机使用,这个时候笔记本作为通信的服务器端,android手机作为客户端 ...