面试整理（3）js事件委托
事件委托主要用于一个父容器下面有很多功能相仿的子容器，这时候就需要将子容器的事件监听交给父容器来做。父容器之所以能够帮子容器监听其原理是事件冒泡，对于子容器的点击在冒泡时会被父容器捕获到，然后用e.target来判断到底是哪个子容器触发了事件
示例代码：
<html>
<head></head>
<body>
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById("myul")
ul.addEventListener('click',function(e){
alert("选中了："+e.target.innerHTML)
console.log(e.target)
})
</script>
</html>
点击第二个li，console输出<li>2</li>从console的输出我们可以判断出e.target返回的是触发事件的element类型
然后我们看看这个事件委托会不会冒泡
<html>
<head></head>
<body>
<div id="mydiv">
<div>
234
<p>123</p>
</div>
</div>
</body>
<script type="text/javascript">
var div = document.getElementById("mydiv")
div.addEventListener('click',function(e){
alert("选中了："+e.target.innerHTML)
console.log(e.target)
})
</script>
</html>
点击p，发现只有p的事件触发了，上一级的父组件并没有被输出，所以事件委托中e.target就单指那个被点击的组件
最后试一下stopPropagation会不会阻止委托的父元素接收事件
<html>
<head></head>
<body>
<ul id="myul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.getElementById("myul")
ul.addEventListener('click',function(e){
alert("选中了："+e.target.innerHTML)
console.log(e.target)
})
document.getElementsByTagName("li")[0].addEventListener('click',function(e){
e.stopPropagation()
})
</script>
</html>
由于阻断了了事件冒泡，所以点击第一个li没有反应。
面试整理（3）js事件委托的更多相关文章
- JS事件委托学习（转）
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- js事件委托 jQuery写法
http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...
- 原生js事件委托（事件代理）方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
随机推荐
- jdbc 1.0
1. jdbc : java数据库连接技术 2.主要用到的类及接口 Class Driver ManagerDriver Connection Statement PreparedStatement ...
- "Scrum站立会议"浅析
目录 Scrum Scrum Meeting功能及要点 Scrum Meeting点评 Scrum 定义:是一种软件开发流程.它并不是一项技术,这种开发方式的主要驱动核心是人,它采用的是迭代式开发. ...
- oracle package pragma SERIALLY_REUSABLE(编译指示 告诉PL/SQL 的运行时引擎，在数据引用之时不要保持包级数据。)
当包第一次被动调用时,将进行初始化:比如将包从硬盘上调到内存中来,放到系统全局工作区的共享缓冲池中,包的运行状态则被放到用户全局区的会话中存储区中,因此可以保证每个调用包的会话都拥有包的运行副本,当会 ...
- SQL中的declare用法
平时写SQL查询.存储过程都是凭着感觉来,没有探究过SQL的具体语法,一直都是按c#那一套往SQL上模仿,前几天项目中碰到一个问题引起了我对declare定义变量的作用域的兴趣. 大家都知道c#中的局 ...
- 如何更好的使用JAVA线程池
这篇文章结合Doug Lea大神在JDK1.5提供的JCU包,分别从线程池大小参数的设置.工作线程的创建.空闲线程的回收.阻塞队列的使用.任务拒绝策略.线程池Hook等方面来了解线程池的使用,其中涉及 ...
- solr源码分析之solrclound
一.简介 SolrCloud是Solr4.0版本以后基于Solr和Zookeeper的分布式搜索方案.SolrCloud是Solr的基于Zookeeper一种部署方式.Solr可以以多种方式部署,例如 ...
- atcoder 2017Code festival C ——D题 Yet Another Palindrome Partitioning（思维+dp）
题目大意: 把一个字符串s分割成m个串,这m个串满足至多有一种字符出现次数为奇数次,其他均为偶数次,问m的最小值 题解: 首先我们想一下纯暴力怎么做 显然是可以n^2暴力的,然后dp[i]表示分割到i ...
- 【刷题】BZOJ 3172 [Tjoi2013]单词
Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N ...
- Toast与Snackbar的那点事
背景 Toast是Android平台上的常用技术.从用户角度来看,Toast是用户与App交互最基本的提示控件:从开发者角度来看,Toast是开发过程中常用的调试手段之一.此外,Toast语法也非常简 ...
- oracle 远程登录sqlplus TNS：无监听
1.将localhost 改成 计算机名 best-PC,或者ip地址 . 我修改成计算机名,因为经常在无线网络和有限网络之间切换 SID_LIST_LISTENER = (SID_LIST = ...