浅析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 查找新建元素代码
Jul 06 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
浅谈JavaScript正则表达式-非捕获性分组
Mar 08 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 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中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
python控制台显示时钟的示例
2014/02/24 Python
Python多线程实例教程
2014/09/06 Python
python定时执行指定函数的方法
2015/05/27 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python爬虫文件下载图文教程
2018/12/23 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
C语言基础笔试题
2013/04/27 面试题
Ado与Ado.net的相同与不同
2014/12/08 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
团干部培训方案
2014/06/03 职场文书
逃课检讨书范文
2015/05/06 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书