面试题：一个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. Swift几行代码解决UITableView空数据视图问题

    tableView空数据问题 一般项目中tableView若数据为空时会有一个提示示意图 为了更好的管理这种提示示意图,笔者利用extension进行了简单的拓展 解决思路 利用swift面向协议的特 ...

  2. java程序调用.net接口服务地址的写法

    参考文章:http://download.csdn.net/detail/davidiao/7424767 http://www.cnblogs.com/mq0036/p/3554002.html . ...

  3. Django - 回顾（1）- 模型层的Meta选项详解

    一.模型层的Meta选项详解 Django模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.使用方法及参数解释如下: class Book(models.Model): nid ...

  4. BeanFilterUtil

    package com.yundaex.utility.bean.filter; import java.util.ArrayList; import java.util.List; import o ...

  5. CAST 变类型，如 SELECT CAST('12' AS int)

    select distinct CAST(value as signed) valueprice,CAST(value as signed) valueid from app_coupon

  6. 关于js框架 dwz 与 yii的的分页 以及筛选的结合

    此为jicheng1014 原创....地址为http://jicheng1014.cnblogs.com dwz是一个不错的前端框架  但是 注意   所有的后端   都是要自己写的 常见的应用是 ...

  7. 【Unity3D/C#】利用IEnumerable<>和yield产生斐波那契数列

    using UnityEngine; using System.Collections; using System.Collections.Generic; public class YieldTes ...

  8. 【Unity3D】用继承EditorUpdater类来实现Editor模式下的后台处理

    EditorWindow类的OnGUI函数只会在窗口焦点处于Editor窗口上的时候才会运行.如果希望焦点不在Editor窗口上的时候,它也能实时更新,可以实现以下方法: OnDestroy OnDe ...

  9. properties文件 , properties类, 的作用

    "properties文件",是java所支持的配置文件类型.java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文 ...

  10. 使用 ViS2005 进行单元测试

    1. 新建一个空白解决方案,命名为"单元测试- 01"吧. 2.在该解决方案下创建一个类库,作为此次单元测试的测试对象:我们就创建一个数学类(用于实现运算的简单类).命名为&quo ...