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规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
随机推荐
- 函数————count
count和count_if函数是计数函数,先来看一下count函数:count函数的功能是:统计容器中等于value元素的个数. count(first,last,value); first是容器的 ...
- VS2013 MFC基于对话框编程
前言一直利用Qt库做Ui设计,但针对于一些MFC项目,掌握一些必要的MFC开发技巧还是很有必要的.这篇博客里就将自己所学的一些MFC浅显知识记录一下,方便今后的学习.博客里只记录关键步骤. 一.新建M ...
- mysql完美增量备份脚本
是否因为mysql太大,来回备份浪费资源带宽而发愁,如果想解决这个麻烦就需要增量备份. vi /etc/my.cnf开启日志及定期清理日志log-bin=mysql-binbinlog_format= ...
- SQL必知必会——插入数据（十五）
1.数据插入 INSERT用来将行插入(或添加)到数据库表.插入有几种方式: 插入完整的行插入行的一些部分插入某些查询的结果注意:1.使用INSERT语句可能需要客户端/服务端DBMS中的特定安全权限 ...
- ssh登录失败的常见问题分析
操作系统为了安全,一般只允许普通用户使用public_key登录,这时如果以root用户登录,就会出现各种错误.下面是常见的错误及解决方案. Permission denied (publickey) ...
- 在IIS7以上导出所有应用程序池的方法批量域名绑定(网站绑定)
在IIS7+上导出所有应用程序池的方法: %windir%/system32/inetsrv/appcmd list apppool /config /xml > c:/apppools.xml ...
- python模块学习之testlink （自动回写测试案例执行结果到testlink）
安装 pip install TestLink-API-Python-client #!/usr/bin/env Python # -*- coding: utf-8 -*- ''' Created ...
- maven命名
<dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpcl ...
- position: relative 和 position: absoution 的详解
position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型 relative:生成相对定位的元素,相对于其正常位置进行定位. 对应下图的偏移 absolute: 生成绝对定位的元素 ...
- vue-cli3使用cdn引入
1. index.html引入: <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"&g ...