javascript事件委托机制详解
以个人前端工作面试经历来看,javascript事件委托是问的最多的一类题目之一,熟悉事件委托能够了解你对于javascript的掌握程度。
面试官可能问一下问题,现在有5个li待办事件,需要实现当点击一个li时实现弹出该li的信息
<ul class="top">
<li>橘子</li>
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
<li>菠萝</li>
</ul>
当点击第一个li时,会显示“橘子”
我们实现的思路可能想到for循环+获取数组对象的方法,我们借助jquery来实现。代码如下:
<script type="text/javascript">
window.onload=function(){
var getUl=$('.top');
var getLi=$('.top li');
for (var i=0;i<getLi.length;i++){
getLi[i].onclick=function(){
alert($(this).html());//获取li值方法
}
}
}
</script>
这样实现的效果如何呢?站在前端性能优化角度来看,我们需要减少DOM操作来提高页面的性能。上述代码每次点击时都需要获取DOM元素,从ul到li再到alert出事件。如果有1000多个li,这样做将会占用更大的内存。我们有什么更好地解决措施呢?
在讲解事件委托之前,我们先了解一下事件冒泡机制
事件冒泡就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
简单来说,我们实现上述效果,我们用事件委托原理是这样的
点击li时,不是由具体某一li来实现,而是冒泡到他的父级元素来实现,我们到代码层面加一个div
<script type="text/javascript">
window.onload=function(){
var oUl = document.getElementById("top");
var aLi = oUl.getElementsByTagName('li');
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
console.log(target.innerHTML);
}
};
};
</script>
这里需要注意的是利用了事件中都带有的一个target属性来实现,即发生事件时的目标是具体哪一个li.
如有不正确之处,欢迎指正
javascript事件委托机制详解的更多相关文章
- Android事件分发机制详解
事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...
- Android事件传递机制详解及最新源码分析——ViewGroup篇
版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...
- Android 的事件传递机制,详解
Android 的事件传递机制,详解 前两天和一个朋友聊天的时候.然后说到事件传递机制.然后让我说的时候,忽然发现说的不是非常清楚,事实上Android 的事件传递机制也是知道一些,可是感觉自己知道的 ...
- Android Touch事件传递机制详解 下
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/38025165 资源下载:http://download.csdn.net/detail/yu ...
- Android开发——事件分发机制详解
0. 前言 转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52566965 深入学习事件分发机制,是为了解决在Android开发中 ...
- IOS 触摸事件分发机制详解
欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:MelonTeam 前言 很多时候大家都不关心IOS触摸事件的分发机制的实现原理,当遇到以下几种情形的时候你很可能抓破头皮都找不到解决方案 ...
- 【Android面试查漏补缺】之事件分发机制详解
前言 查漏补缺,查漏补缺,你不知道哪里漏了,怎么补缺呢?本文属于[Android面试查漏补缺]系列文章第一篇,持续更新中,感兴趣的朋友可以[关注+收藏]哦~ 本系列文章是对自己的前段时间面试经历的总结 ...
- android 事件分发机制详解(OnTouchListener,OnClick)
昨天做东西做到触摸事件冲突,以前也经常碰到事件冲突,想到要研究一下Android的事件冲突机制,于是从昨天开始到今天整整一天时间都要了解这方面的知识,这才懂了安卓的触摸和点击事件的机制.探究如下: 首 ...
- spring事件通知机制详解
优势 解耦 对同一种事件有多种处理方式 不干扰主线(main line) 起源 要讲spring的事件通知机制,就要先了解一下spring中的这些接口和抽象类: ApplicationEventPub ...
随机推荐
- ORB_SLAM2之Pangolin的安装与问题处理
前言 本篇博客中,我们主要介绍了在安装ORB_SLAM2所需的第三方库Pangolin的过程中遇到的一些问题及解决方法. 1.Pangolin是什么? Pangolin是一个用于OpenGL显示/交互 ...
- 微信公众号开发笔记1(nodejs开发的)
本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...
- System.Data.SqlClient.SqlException (0x80131904): EXECUTE 后的事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配。上一计数 = 1,当前计数 = 0。 EXECUTE 后的事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配。上一计数 = 1,当前计数 = 0。
EF使用ExecuteSqlCommand(db.Database.ExecuteSqlCommand("exec proc_DeleteCaseInfo_Output @caseID&qu ...
- php 中时间函数date及常用的时间计算
曾在项目中需要使用到今天,昨天,本周,本月,本季度,今年,上周上月,上季度等等时间戳,趁最近时间比较充足,因此计划对php的相关时间知识点进行总结学习 1,阅读php手册date函数 常用时间函数: ...
- 转csdn-css4
http://www.csdn.net/article/2015-03-06/2824127-css4
- POJ1012-Joseph数学
题目链接:http://poj.org/problem?id=1012 题目大意: 约瑟夫环的一个扩展,2*k个人围一圈,前k个是好人,后k个是坏人.报到m的人就要死掉,然后重新开始报数.要求的是最小 ...
- GPIO控制LED
一.LED灯的亮灭控制的配置步骤(GPIO4_D3): 1.GPIO4的CRU_CLKGATE_CON31时钟使能配置(用来保证GPIO4可写): io -4 0xff76037c 0xffff019 ...
- 点击Input框弹出日期选项
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python装饰器实现几类验证功能做法
最近新需求来了,要给系统增加几个资源权限.尽量减少代码的改动和程序的复杂程度.所以还是使用装饰器比较科学 之前用了一些登录验证的现成装饰器模块.然后仿写一些用户管理部分的权限装饰器.比如下面这种 de ...
- Apache solr(一)
概念:Apache Solr 是一个开源的搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现.Apache Solr 中存储的资源是以 Docum ...