浅析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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
Express的路由详解
Dec 10 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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日期处理函数 整型日期格式
2011/01/12 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP数组函数知识汇总
2016/05/12 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python取余运算符知识点详解
2019/06/27 Python
python实现简易淘宝购物
2019/11/22 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
安全生产责任书范本
2014/04/15 职场文书
2015年招生工作总结
2015/05/04 职场文书
老人院义工活动感想
2015/08/07 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
anaconda python3.8安装后降级
2021/06/11 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python