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. centos下安装java jdk１.8

    ---恢复内容开始--- mysql密码修改了,发现还没装jdk,那就一起记录下来吧.虽然网上好多,但自己想查更方便了. 查看有没有装jdk #java -version显示下面信息,不是oracle ...

  2. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

  3. vue mock数据（模拟后台）

    本文转载自:https://blog.csdn.net/benben513624/article/details/78562529 vue实现ajax获取后台数据是通过vue-resource,首先通 ...

  4. 20140902 字符串拷贝函数 右旋转字符串 string类的编写

    1.strncpy字符串拷贝函数 //strncpy的程序 #include<stdio.h> #include<assert.h> char *strncpy1(char * ...

  5. Dubbo 系列（07-1）集群容错 - 服务字典

    Dubbo 系列(07-1)集群容错 - 服务字典 [toc] Spring Cloud Alibaba 系列目录 - Dubbo 篇 1. 背景介绍 本篇文章,将开始分析 Dubbo 集群容错方面的 ...

  6. python_面向对象,类名称空间,对象名称空间,组合

    创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变量(字段) 动态属性就是定义在类中的方法 其中类 ...

  7. 树莓派上Opencv highgui的问题

    错误描述:https://bbs.csdn.net/topics/394616975?page=1#post-409508178 解决方案:直接改系统环境变量 # vim /etc/profile e ...

  8. Raspberry Pi 4B 安装QT5和qtCreator

    https://blog.csdn.net/coekjin/article/details/52049273 sudo apt-get install qt5-default sudo apt-get ...

  9. iptables 防火墙（下）

    iptables 防火墙(下) 1. 常见的隐含匹配条件: 1.1 端口匹配: --sport 源端口.--dport 目的端口 1.2 TCP标记匹配: -tcp-flags 检查范围被设置的标记 ...

  10. BZOJ 4289 最短路+优化建图

    题意:给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边权. 解法:参考h ...