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. ZROI week6

    ZROI week6 T1 用一个类似背包的东西记录答案. T2 好像直接用|操作即可. T3 瞎搞就完事了 T4 启发式合并,然而变量写错了,就没了... 总结 100 + 100 + 100 + ...

  2. 基于Vue2、WebSocket的仿腾讯QQ

    概述 本项目基于Vue2进行高仿手机QQ的webapp,UI上使用的是museUI,使用springMVC搭建的后台.聊天方面,使用WebSocket实现浏览器与服务器全双工通信,允许服务器主动发送信 ...

  3. 【Java架构：基础技术】一篇文章搞掂：Spring Boot

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文是对<Spring Boot 实战第4版>的总结,大家也可以去仔细研读该书 注意,书中使用的Spring Boot ...

  4. linux下lamp.sh一键配置lamp环境流程

    linux下lamp.sh一键配置lamp环境流程 一.总结 一句话总结: 2.将网站从github上clone到/data/www/网站域名/ 3.更改网站目录权限:chown -R apache: ...

  5. 转-C++之string判断字符串是否包含某个子串

    转自:https://blog.csdn.net/zhouxinxin0202/article/details/77862615/ 1.string类函数find C++的string类提供了字符串中 ...

  6. spring相关注解

    spring相关注解: 使用之前需要<context:annotation-config/>在配置文件中启用 @Required 应用于类属性的set方法,并且要求该属性必须在xml容器里 ...

  7. bat 笔记

    cmd删除非空文件夹 rd+空格+/s/q+空格+d:\filedir for语句的基本用法 在批处理文件中: FOR %%variable IN (command1) DO command2 [co ...

  8. Django框架（二十四）—— Django rest_framework-视图组件

    目录 视图组件 一.基本视图 二.自定义的封装视图 三.利用mixin类和generice类编写视图 1.使用 2.源码 四.利用generics 下的ListCreateAPIView,Retrie ...

  9. helm-mode打开文件支持中文搜索

    helm-mode打开文件支持中文搜索 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83949 ...

  10. zabbix监控linux内存

    通过free -m查看当前内存 可用内存:Available memory=free+buffers+cached,即31068=759+66+30243 已用内存:Used memory=used- ...