js委托事件-addEventListeners（冒泡方向）
JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。
实例：
给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="div">
- <p>11111</p>
- <p>2222</p>
- </div>
- <button id="btn">xxxx</button>
- <script>
- document.getElementById("div").addEventListener("click",function(e){
- if(e.target.nodeName=="P"){
- alert("xxx")
- }
- })
- document.getElementById("xx").onclick=function(){
- var p = document.createElement("p");
- p.innerHTML="333";
- document.getElementById("btn").appendChild(p);
- }
- </script>
- </body>
- </html>
冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡
在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡
当我们设置为true的时候就会由父元素向下冒泡
实例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
- <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
- </div>
- <script>
- document.getElementById("id1").addEventListener('click',function(){
- console.log("id1");
- },true)
- document.getElementById("id2").addEventListener('click',function(){
- console.log("id2");
- },true)
- </script>
- </body>
- </html>
js委托事件-addEventListeners（冒泡方向）的更多相关文章
- js委托事件和代理事件
转载出处:https://www.cnblogs.com/liugang-vip/p/5616484.html js中的事件委托或是事件代理详解 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴 ...
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 初始js闭包&事件的冒泡和捕获&EVENT对象
一.初识闭包 function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- javascript 事件委托,jq,js模拟事件
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...
- JS中事件代理与委托
在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...
- JS：事件委托
事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
随机推荐
- jdbc blob插入及查询操作
首先建一张表 create table picture( picId ) primary key not null, picName ) not null, picfile image null ) ...
- Network基础(三)：网线的制作、交换机基本命令模式、交换机命令行基本配置、交换机的密码设置
一.网线的制作 目标: 在常见的计算机网络中,网线主要用来连接计算机与交换机(或宽带路由器).交换机与交换机.交换机与路由器,以及需要连网的其他各种设备.网线的制作与测试是作为网络管理员的一个入门技能 ...
- taomcat中catalina.out文件
项目中发现在linux环境下布署的tomcat所占用的磁盘空间越来越大,是catalina.out 文件,每天几乎是2个G,发现可能会影响到tomcat服务(没确定)正常访问.文件这么大,其实已经无法 ...
- 分布式系统理论基础2 ：CAP
本文转自:https://www.cnblogs.com/bangerlee/p/5328888.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...
- 远程到Server系统安装和使用QTP
转自http://www.51testing.com/html/40/307440-832446.html 感谢作者 多童鞋都问在2003上如何安装QTP,为何单机许可不能使用? 我在N太serve ...
- 有关JWT(Json Web Token)的那些事
用户认证是计算机安全领域一个永恒的热点话题,然而你会发现,开发者很少讨论有关Json Web Token的话题,其实使用Json Web Token集成到API身份验证机制中是容易,本文给大家普及基础 ...
- CentOS 安装MySQL5.7 源码方式安装
MySQL rpm方式安装:https://www.cnblogs.com/deverz/p/9560403.html 1.卸载已经安装的MySQL yum list installed mysqlr ...
- os.walk|图片数据集
该函数的功能:遍历指定文件夹下的所有[路径][文件夹][文件名] ''' os.walk(top[, topdown=True[, onerror=None[, followlinks=False]] ...
- Django有办法打开HTTP长轮询连接吗？
保持连接打开,直到发生事件. 解决方案 看看Django / Comet(推送):所有邪恶中最少的?或者彗星在Python中的最新推荐? - COMET是“ajax long-polling”的另一个 ...
- python获取Linux发行版名称
我必须从Python脚本中获取Linux发行版名称.dist平台模块中有一个方法: import platform platform.dist() 但在我的Arch Linux下它返回: >&g ...