浅析javascript中的事件代理


Posted in Javascript onNovember 06, 2015

本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家。

题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy,

<ul id="ulItem">
 <li id="li1">1</li>
 <li id="li2">2</li>
 <li id="li3">3</li>
 ...
 <li id="li1000">1000</li>
</ul>

需要考虑到浏览器兼容性、事件冒泡、效率等问题。看到问题后我就直接在纸上写下了如下答案:

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
 lis[i].onclick = function(){
 alert("内容:"+this.innerHTML);
 alert("位置:"+getElementPosition(this).x+","+getElementPosition(this).y;
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }<br>return {x:x, y:y};
}

面试结果:写完了又看了一遍感觉没必要考虑兼容性、事件冒泡啊。效率的话,想了想,也想不出怎么提升了,就这样给面试官看了。面试官人也挺好的,他看了之后说:你并没有考虑到我说的重点啊,你这样1000次循环添加点击事件效率是很低的。然后就跟我讲了利用事件冒泡的特性,来提高效率,即事件代理(ps:以前做项目有遇到过要阻止事件冒泡的时候,但利用事件冒泡特性提高效率却还完全不知道)。听了面试官讲的涨了姿势,回来后自己也上网查了一下,现在自己再总结下当做记录自己学习的过程吧:

事件代理(Event Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。
为什么要这么做?众所周知,DOM操作是十分消耗性能的,所以重复的事件绑定简直是性能杀手。而事件代理的核心思想,就是通过尽量少的绑定,去监听尽量多的事件。程序猿的事,没代码说个J8,下面贴出代码:

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};
}

嗯,现在代码去掉了for循环,提高了效率,也有了兼容性方面的处理,感觉这个答案应该可以了吧。上面说的也就是为了一道笔试题,下面就再本着学术研究的思想说说事件代理:

在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器。然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。任何一个事件的目标元素都是最开始的那个元素,在我们的这个例子中也就是按钮,并且它在我们的事件对象中以属性的形式出现。使用事件代理,我们可以把事件处理器添加到一个元素上,等待一个事件从它的子级元素里冒泡上来,并且可以得知这个事件是从哪个元素开始的。

关于事件代理,今天也是初次接触,就先写到这吧,希望对大家的学习有所帮助。

Javascript 相关文章推荐
国外的为初学者写的JavaScript教程
Jun 09 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
详解javascript中的事件处理
Nov 06 #Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 #Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 #Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 #Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 #Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
React实现轮播效果
2020/08/25 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python Django基础二之URL路由系统
2019/07/18 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
房地产员工找工作的自我评价
2013/11/15 职场文书
办公室保洁员岗位职责
2013/12/02 职场文书
劳资专员岗位职责
2013/12/27 职场文书
运动员口号
2014/06/09 职场文书
大学生年度个人总结
2015/02/15 职场文书
大学学生会辞职信
2015/05/13 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
暑假生活随笔
2015/08/15 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书