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规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
随机推荐
- nginx的基础概念
http://tengine.taobao.org/book/index.html 算是看书笔记吧,太多了就用自己的话写一下了 nginx是以多进程 的方式来工作的,启动时会有一个master进程 ...
- Echarts 甘特图教程
Echarts甘特图教程 echarts官网实例: https://gallery.echartsjs.com/editor.html?c=xEYpsVs30s 效果: 代码: <html& ...
- Git Git管理码云项目
Git 一.下载安装 1. 要使用git 先安转git 请到官网下载最新git https://git-scm.com/downloads 2. 一路默认安装,安装完成右键查看下是否有Git. 二 ...
- QTP学习笔记--define new test object
目前在测的系统里,有图片控件,图片源都是一样的,链接地址不同(链接地址是动态变化的,不适合作为属性). QTP的识别机制是根据Index来的,复制对象之后更改Index的属性方法无效,采用define ...
- form表单submit事件
form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...
- libVEX学习
VEX IR是一种更加接近于compiler使用的中间语言/中间表示,它是不依赖于特定体系架构的. 1. Code Blocks code blocks是VEX处理代码的一个单元,使用IRSB结构体表 ...
- HBase 入门之数据刷写(Memstore Flush)详细说明
接触过 HBase 的同学应该对 HBase 写数据的过程比较熟悉(不熟悉也没关系).HBase 写数据(比如 put.delete)的时候,都是写 WAL(假设 WAL 没有被关闭) ,然后将数据写 ...
- openstack部署安装
OpenStack实战 准备环境 controller 10.0.0.11 compute1 10.0.0.31 常用服务端口 mariadb:3306 memcached:11211 消息队列:56 ...
- java多线程学习笔记（五）
补充一个synchronized关键字的结论: 线程A先持有object对象的Lock锁,B线程可以以异步的方式调用object对象中的非synchronized类型的方法 A线程现持有object对 ...
- ubuntu中搭建基本的开发环境
1.搭建基本开发环境: sudo apt-get install build-essential 2.安装语法.词法分析器 sudo apt-get install bison flex 3.安装C函 ...