JQuery中live()、delegate()、on()事件都能给新增元素绑定事件，原理就是用了事件委托。

实例：

给id为div的元素绑定一个click委托，如果冒泡上来的元素是P元素就会执行alert("xxx");

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div">
  9. <p>11111</p>
  10. <p>2222</p>
  11. </div>
  12. <button id="btn">xxxx</button>
  13. <script>
  14. document.getElementById("div").addEventListener("click",function(e){
  15. if(e.target.nodeName=="P"){
  16. alert("xxx")
  17. }
  18. })
  19. document.getElementById("xx").onclick=function(){
  20. var p = document.createElement("p");
  21. p.innerHTML="333";
  22. document.getElementById("btn").appendChild(p);
  23. }
  24. </script>
  25. </body>
  26. </html>

冒泡方式分为2种，一种是由子元素向上冒泡，一种是由父元素向下冒泡

在使用addEventListeners的时候有第三个参数true和flase；默认是flase，由子元素向上冒泡

当我们设置为true的时候就会由父元素向下冒泡

实例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. </head>
    7. <body>
    8. <div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:blue; z-index:4">
    9. <div id="id2" style="width:100px; height:100px; top:20px; left:70px; background-color:green; "></div>
    10. </div>
    11. <script>
    12. document.getElementById("id1").addEventListener('click',function(){
    13. console.log("id1");
    14. },true)
    15. document.getElementById("id2").addEventListener('click',function(){
    16. console.log("id2");
    17. },true)
    18. </script>
    19. </body>
    20. </html>

js委托事件-addEventListeners（冒泡方向）的更多相关文章

  1. js委托事件和代理事件

    转载出处:https://www.cnblogs.com/liugang-vip/p/5616484.html js中的事件委托或是事件代理详解 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴 ...

  2. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  3. 初始js闭包&事件的冒泡和捕获&EVENT对象

    一.初识闭包 function a(){   var n = 0;   this.inc = function () {     n++;     console.log(n);   }; } var ...

  4. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  5. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  7. javascript 事件委托,jq,js模拟事件

    <!DOCTYPE> <html> <head> <title></title> <script src="Scripts/ ...

  8. JS中事件代理与委托

    在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...

  9. JS：事件委托

    事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...

随机推荐

  1. python 操作数据库的常用SQL命令

    这俩天在学习PYTHON操作数据库的知识.其实基本SQL命令是与以前学习的MYSQL命令一致,只是增加了一些PYTHON语句. 1,安装pymysql,并导入. import pymysql 2,因为 ...

  2. java LogWriter

    package org.rx.core; import lombok.Getter; import lombok.Setter; import lombok.SneakyThrows; import ...

  3. HTML5: HTML5 Canvas

    ylbtech-HTML5: HTML5 Canvas 1.返回顶部 1. HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布 ...

  4. mysql存储过程、函数、触发器、

    当数据库版本不允许直接使用存储过程.函数的语法时用delimiter // 将结束符改成//用完之后再写delimiter;将结束符改回来即可,调用过程.函数用call+其名字即可返回结果 delim ...

  5. Nginx网络架构实战学习笔记（三）：nginx gzip压缩提升网站速度、expires缓存提升网站负载、反向代理实现nginx+apache动静分离、nginx实现负载均衡

    文章目录 nginx gzip压缩提升网站速度 expires缓存提升网站负载 反向代理实现nginx+apache动静分离 nginx实现负载均衡 nginx gzip压缩提升网站速度 网页内容的压 ...

  6. [已解决]报错: twisted 18.7.0 requires PyHamcrest>=1.9.0

    1.下载对应的Twisted,下载地址:https://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 2.通过Anaconda3的Anaconda Promp ...

  7. spark复习总结01

    1.MapReduce和spark的对比 MapReduce Spark 数据存储结构:磁盘hdfs文件系统的split 使用内存构建弹性分布式数据集RDD,对数据进行运算和cache 编程范式:Ma ...

  8. Zookeeper-技术专区-运作流程分析介绍

    Zookeeper的启动流程 Zookeeper的主类是QuorumPeerMain,启动时读取zoo.cfg配置文件,如果没有配置server列表,则单机模式启动,否则按集群模式启动,这里只分析集群 ...

  9. C语言指向指针的指针

    #include <stdio.h> int main() { /********************************************* * 指向指针的指针:指针变量存 ...

  10. [转] datetime.now、datetime.utcnow以及Django中的timezone.now之间的区别

      https://blog.csdn.net/sinat_41898105/article/details/80984298   在我们使用Django做项目时经常会遇到时间的存储与读取不一致的问题 ...