关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
面试题:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy。
看到这个题目,我们一般首先想到的思路是,for循环,遍历1000次。这样的话1000次的循环,效率很低,如何提高。
可以考虑利用事件冒泡特性提高效率。主要是利用事件代理。
事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。
为什么要这么做?众所周知,DOM操作是十分消耗性能的,所以重复的事件绑定简直是性能杀手。而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件。
Demo:
test.html:
<!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>
转载于:https://www.cnblogs.com/xiaohuihui123/p/4812902.html
关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)相关推荐
- 如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件 一.HTML demo代码 二.JS动态新增li并绑定点击事件 三.效果图 有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...
- js为li列表添加点击事件
今天看到一个面试题目 //html代码 <body><ul><li>1</li><li>2</li><li>3< ...
- vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 页面内容 在对应的组件的最外层div上加上这样的样式: .conten ...
- 下拉框触发单击事件_谈谈如何给下拉框option添加点击事件?
我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在select里的onchange方法里触发. 想添加一个option的触发事件,在option中添加o ...
- Android 点击事件,如何在界面上或者某个控件上添加点击事件
说到点击事件,第一印象 setOnClickListener() 方法,这也是用的最多的控件点击事件方法,这篇文章不分享这个方法,使用该方法的前提是你要拿到这个控件的 View 才可以调用这个方法 通 ...
- iostext添加点击事件_iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 以前老师讲过类似的功能,自己懒得回头看了,找了很多第三方的,感觉这个小巧便利,作者只是扩展了分类,实现起来代码也少.先来个效果图 自己的项目,直接上代码 - (void ...
- uni-app中Card slots的使用(添加点击事件)(uni-card)
uni-app官方文档中只给出了action底部插槽的使用的例子.对于初学者来说,当需要在卡片顶部添加点击事件时,往往也需要一个例子来引路. 这里是使用title(卡片头部插槽)在顶部添加点击事件,如 ...
- android 部分区域点击,Android编程实现ListView中item部分区域添加点击事件功能
本文实例讲述了Android编程实现ListView中item部分区域添加点击事件功能.分享给大家供大家参考,具体如下: 需求如题目:Android listview中item部分区域添加点击事件,在 ...
- flutter中使用InkWell给任意Widget添加点击事件
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 重要消息 [x1]微信公众号的每日提醒 随时随记 每日积累 随心而过 [x2]各种系列的视频教程 免费开源 关注 你不会迷路 [x3] ...
- 谷歌地图中给infowindow添加点击事件
项目中想实现点击地图中marker上面的图标,即点击infowindow之后跳转到另一个界面,发现不可以像监听marker点击事件一样直接给infowindow添加点击事件.解决方法为将content ...
最新文章
- linux resource
- C#基础—不完整类型(局部类型)
- Android之设置当前app为默认浏览器研究
- YUI3在美团的实践
- java mbean获取堆信息_实时取得虚拟机类信息、内存信息、MXBean的使用方法
- Spring框架注入注解与拦截器浅谈
- PHP查询文件扩展名
- hdu 4619 Warm up 2 (二分匹配)
- java图表分析_怎样用图表分析数据(一)
- centos6.0 LAMP源码安装
- Delphi2007卸载
- 软件工程第一次作业——数独的求解与生成
- 今日制造怎么安装solidworks插件_PS插件安装后出现了登陆界面,无法使用怎么解决?保证一招搞定...
- revit二次开发概念_半天入门Revit二次开发
- windows电脑桌面旋转快捷键
- unity-shader-头发渲染-各向异性
- 数字基础设施可视化管理,任重而道远
- 【Unity】Obi插件系列(六)—— Obi Cloth
- 大数据学长面试之boss直聘面试题
- 北斗短报文通信实现源码
热门文章
- atitit。全局变量的设计与实现 java php的异同
- Rust: 镜像设置要注意影响效果
- 袁承兴:Rust异步编程 Pinning
- 快讯丨业界首本云网络图书发布
- oracle设置禁用外键,oracle禁用表外键
- 【车间调度】基于matlab差分进化算法求解作业车间调度问题【含Matlab源码 1743期】
- 2022美国大学生数学建模竞赛D题思路
- 【手写数字识别】基于matlab GUI BP神经网络手写数字识别(导图+带面板)【含Matlab源码 320期】
- 【路径规划】基于matlab粒子群算法栅格地图路径规划【含Matlab源码 579期】
- jsp 引入java类库报错_myeclipse中运行Jsp项目调用java,运行不了,报错说不能解析jsp中的类型,资源文件无法使用,求解,...