事件冒泡

  简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素。

  这可能会带来困扰,不必要的事件处理函数被执行了,不过我们可以阻止事件冒泡。事件触发时,会传入一个event对象,它有一个 stopPropagation() 方法可以阻止事件冒泡。

  事件冒泡机制当然也有有利的一面,事件代理就是基于浏览器的事件冒泡机制。

事件代理

  事件代理也叫事件委托,当我们需要为父元素的很多子元素添加事件时,可以通过把事件添加到父元素并把事件委托给父元素来触发事件处理函数。

  在开发中,我们有时会遇到给列表每一个子元素都添加一个事件,可以用遍历来操作,这种方法固然简单,但是如果这个列表有巨量的子元素的时候,就要消耗大量的性能,并且当子元素需要新增的时候,每增加一个子元素就需要遍历一次,这种方法就更不可取。

  事件委托不仅实现相同了功能,而且大大减少了DOM操作。

    <ul class="wrap">
<li class="item">1111<button>删除</button></li>
<li class="item">2222<button>删除</button></li>
<li class="item">3333<button>删除</button></li>
<li class="item">4444<button>删除</button></li>
<li class="item">5555<button>删除</button></li>
</ul>
<button class="add">添加子元素</button> <script>
let oWrap = document.getElementsByClassName('wrap')[0];
let oItem = document.getElementsByClassName('item');
let oAdd = document.getElementsByClassName('add')[0]; oWrap.addEventListener('click',function(e){
//判断事件目标元素是否为 li ,并显示它的第一个子节点的文本内容
if(e.target && e.target.nodeName.toLowerCase() == 'li'){
console.log(e.target.childNodes[0].textContent);
} //判断事件目标元素是否为 button ,删除它的父元素
if(e.target && e.target.nodeName.toLowerCase() == 'button'){
oWrap.removeChild(e.target.parentNode);
}
}) //添加子节点
oAdd.addEventListener('click',function () {
let oLi = document.createElement('li');
oLi.setAttribute('class','item');
oLi.innerHTML = oItem.length+1+'<button>删除</button>';
oWrap.appendChild(oLi);
})
</script>

javascript 事件冒泡和事件代理的更多相关文章

  1. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

  2. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  3. javascript --- 事件冒泡与事件捕获

    事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...

  4. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  5. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  6. javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  7. JavaScript中的事件冒泡?事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  8. JavaScript(3)---事件冒泡、事件捕获

    JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...

  9. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

随机推荐

  1. 开启远程桌面连接windows的方法以及遇到的问题

    确认电脑的远程服务是否已经开启 开始--运行--输入“services.msc ”,打开服务,找到三个remote desktop开头的服务 Remote Desktop Configuration. ...

  2. Perl输出带颜色行号或普通输出行

    定义好了一个可以输出带颜色行号以及行数据的函数print_with_line_num,f()是测试函数.在f()函数中,读取文件并输出读取的每一行数据,但根据参数选项决定是普通输出行还是同时输出带颜色 ...

  3. 新增和修改页面的用例设计和Bug提交

    问题: 新增页面和修改页面,基本上输入框都一样,那比如同一个输入框的用例设计: 1. 写了新增页面的用例,修改页面对该输入框还有再写一遍用例的必要吗? 2. 执行用例时,新增页面验证了必填项,长度,数 ...

  4. [Alpha阶段]事后分析博客

    目录 Alpha阶段事后分析博客 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结 讨论照片 Alpha阶段事后分析博客 作业要求:Alpha阶段事后分析 设想和 ...

  5. java基础-jdk工具包

    1. 标准工具 这些工具都是JDK提供的,通常都是长期支持的工具,JDK承诺这些工具比较好用.不同系统.不同版本之间可能会有差异,但是不会突然就有一个工具消失. 1.1 基础包 (extcheck, ...

  6. visual studio 配置属性中增加自定义宏和宏值

    visual studio中有一些预先定义的宏,用于配置项目属性,如SolutionDir.我们也可以自定义类似的宏,从而在配置包含目录(include)或添加依赖项时简化配置项. 如何创建自己的宏呢 ...

  7. beanshell断言模版

    if("${createTime_1}".equals("${createTime_2}")){ Failure = false; FailureMessage ...

  8. 目录树生成工具treer

    安装方法 $ npm install treer -g 生成结构 $ treer Desktop├─.DS_Store├─.localized├─dir2 | ├─file3 | └file4├─di ...

  9. php函数 array_count_values

    (PHP 4, PHP 5, PHP 7) array_count_values — 统计数组中所有的值 array_count_values ( array $array ) : array arr ...

  10. Reflections 介绍

    Reflections 介绍 研究Spring扫包原理的时候,在网上查阅相关资料的时候,发现使用Reflections库可以实现扫包. Reflections 通过扫描 classpath,索引元数据 ...