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. Service系统服务(六)：rsync基本用法、rsync+SSH同步、配置rsync服务端、访问rsync共享资源、使用inotifywait工具、配置Web镜像同步、配置并验证Split分离解析

    一.rsync基本用法 目标: 本例要求掌握远程同步的基本操作,使用rsync命令完成下列任务: 1> 将目录 /boot 同步到目录 /todir 下   2> 将目录 /boot 下的 ...

  2. Oracle中start with...connect by (prior)子句的用法

    connect by 是结构化查询中用到的,基本语法是:select … from tablenamestart with 条件1connect by 条件2where 条件3; 例:select * ...

  3. java.lang.String中的replace方法到底替换了一个还是全部替换了。

    你没有看错我说的就是那个最常用的java.lang.String,String可以说在Java中使用量最广泛的类了. 但是我却发现我弄错了他的一个API(也可以说是两个API),这个API是关于字符串 ...

  4. 图片模式CMYK和RGB在浏览器下的变化

    手机浏览器里面不能显示出模式为CMYK的图片, 模式为CMYK的图片在IE浏览器里面显示和模式为RGB的一样 模式为CMYK的图片在火狐里面显示有色差

  5. java.lang

    package cn.sxt;   import java.lang.*;   public class BooleanDemo {      public static void main(Stri ...

  6. XSS漏洞防护

    主要是添加黑名单进行拦截 public class XSSFilter implements Filter { private final Log logger = LogFactory.getLog ...

  7. ABTest介绍及abtest流量切换实现

    本文为学习abtest切流方案方便以后查看大部分内容转载自原文 https://blog.csdn.net/tanweii163/article/details/80543083 互联网公司的业务发展 ...

  8. mybatis自学历程(二)

    传递多个参数 1.在mybatis.xml下<mappers>下使用<package> <mappers> <package name="com.m ...

  9. Could not autowire. No beans of 'int' type found. less... (Ctrl+F1) Checks autowiring problems in a bean class.

    package com.cxy.netty.controller; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel ...

  10. Linux面试基础（一）

    Linux基本命令 man rm   查看命令帮助 tar cf 压缩文件 tar xf 解压缩 ping  查看是否能连接网络 rm           删除数据 find          搜索数 ...