面试整理（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 中, ...
随机推荐
- 【剑指offer】Java实现(持续更新中）
面试题3 二维数组中的查找 Leetcode--74 Search a 2D Matrix /*Java Write an efficient algorithm that searches for ...
- 【beta】阶段会议记录汇总
第一次: http://www.cnblogs.com/yumiaomiao/p/6026752.html 第二次: http://www.cnblogs.com/liquan/p/6031802.h ...
- TP中if标签
if标签 If标签如果php中if语句的作用,if是用于流程控制的. 在ThinkPHP中if标签也是用于流程控制的. If标签的语法格式: <if condition=’条件表达式’> ...
- Redis 请求应答模式和往返延时 Pipelining
Redis是一个CS结构的TCP服务器,使用”请求-应答”的模式.,客户端发起一个请求是这样的步骤: 客户端发送一个请求给服务器,然后等待服务器的响应,一般客户端使用阻塞模式来等待服务器响应. 服务器 ...
- BZOJ 1835 基站选址(DP+线段树)
# include <cstdio> # include <cstring> # include <cstdlib> # include <iostream& ...
- 洛谷 P2421 A-B数对（增强版）
题目描述 给出N 个从小到大排好序的整数,一个差值C,要求在这N个整数中找两个数A 和B,使得A-B=C,问这样的方案有多少种? 例如:N=5,C=2,5 个整数是:2 2 4 8 10.答案是3.具 ...
- Ants UVA - 1411（km板题竟然让我换了个板子）
题意: 给出n个白点和n个黑点的坐标,要求用n条不相交的线段把它们连接起来,其中每条线段恰好连接一个白点和一个黑点,每个点恰好连接到一条线段 解析: 带入负的欧几里得距离求就好了 假设a1-b1 与 ...
- 【刷题】BZOJ 4566 [Haoi2016]找相同字符
Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. Input 两行,两个字符串s1,s2,长度分别为 ...
- [AT2363] [agc012_c] Tautonym Puzzle
题目链接 AtCoder:https://agc012.contest.atcoder.jp/tasks/agc012_c 洛谷:https://www.luogu.org/problemnew/sh ...
- 【BZOJ5333】荣誉称号（动态规划）
[BZOJ5333]荣誉称号(动态规划) 题面 BZOJ 洛谷 题解 今天早上贱狗老师讲的.然而我还是不会. 只好照着\(zsy\)代码大力理解一波. 首先观察等式,如果比较熟悉线段树,会发现就是线段 ...