javascript中的addEventListener(事件名，回调，布尔)

其中第三个参数默认为false-事件冒泡，true为事件捕获

二者区别：

  • 事件冒泡：目标元素事件先触发，然后父元素事件触发
  • 事件捕获：父元素事件先触发，然后目标元素事件触发
 1 <body id="body">

 2     <div id="div1">

 3         <a href="#">a1</a>

 4         <a href="#">a2</a>

 5         <a href="#">a3</a>

 6         <a href="#">a4</a>

 7         <button id="btn1">点击添加一个a标签</button>

 8     </div>

 9 </body>

10 <script>

11     //通用绑定事件

12     function bindEvent(elem, type, fn) {

13         elem.addEventListener(type, fn)

14     }

15

16     //事件冒泡

17     const div1 = document.getElementById("div1")

18     bindEvent(div1, 'click', event=>{  //事件冒泡，如果你点击是button或者a 则div1绑定的回调也会触发

19         console.log(event.target)

20         alert('这是冒泡')

21     })

22     const body = document.getElementById("body")

23     bindEvent(body, 'click', event=>{  //事件冒泡，如果你点击是button或者a 则body绑定的回调也会触发

24         console.log(event.target)

25         alert('这是body')

26     })

27 </script>

事件委托是利用事件冒泡原理，把事件监听绑定在元素的父级上。当元素被点击时，父级上绑定的点击事件就会被触发，事件触发函数里通过判断 e.target 上的 data-name 或 class 等标识来执行不同的逻辑。

优点：可以减少浏览器内存占用，提高代码整洁度

<body id="body">

    <div id="div1">

        <a href="#">a1</a>

        <a href="#">a2</a>

        <a href="#">a3</a>

        <a href="#">a4</a>

        <button id="btn1">点击添加一个a标签</button>

    </div>

</body>

<script>

    //通用绑定事件

    function bindEvent(elem, type, fn) {

        elem.addEventListener(type, fn)

    }

    //事件代理

    const div1 = document.getElementById("div1")

    bindEvent(div1, 'click', event=>{  //事件冒泡，可以指定父元素委托某个子元素触发父元素绑定的回调

        event.preventDefault();

        let target = event.target

        if(target.nodeName=='A') {

            console.log('这是div')

        }

    })

</script>

阻止事件冒泡和默认事件

event.preventDefault()可以阻止如a链接等默认行为

event.stopPropagation()可以阻止事件继续冒泡

手写一个事件函数

 1 //通用绑定事件

 2     function bindEvent(elem, type, selector, fn) {

 3         //如果fn为null则证明这是普通事件

 4         if(fn == null) {

 5             fn = selector

 6             selector = null

 7         }

 8         elem.addEventListener(type, event =>{

 9             const target = event.target

10             //如果selector存在证明他是事件委托

11             if(selector) {

12                 if(target.matches(selector)) {

13                     fn.call(target, event)

14                 }

15             }else {

16                 fn.call(target, event)

17             }

18         })

19     }

Dom基础（三）:事件冒泡，事件委托（事件代理）和事件捕获的更多相关文章

  1. jquery 事件冒泡的介绍以及如何阻止事件冒泡

    在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级 ...

  2. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  3. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  5. vue中click阻止事件冒泡，防止触发另一个事件

    在使用el-upload组件时,在其中放置了一个删除按钮的图片. 当点击图片,本想只删除上传的视频,但是意外触发了el-upload中的事件 解决办法:用stop,结果只删除当前预览,不触发上传事件. ...

  6. Asp.Net 利用反射获得委托和事件以及创建委托实例和添加事件处理程序

    子程序定义: public delegate void CurrentControlListenEvent(string uniqueID, string way = null); public ev ...

  7. DOM事件机制(事件捕获和事件冒泡和事件委托)

    内容: 1.事件复习 2.事件冒泡与事件捕获 3.事件委托 1.事件复习 (1)事件 事件是用来处理响应的一个机制,这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器 下面的链接 ...

  8. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

  9. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  10. JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

    有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...

随机推荐

  1. 洛谷 P2375 动物园

    题目详情 题目描述 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的,园长决定开设算法班,让动物们学习算法 ...

  2. 三面面试官：运行 npm run xxx 的时候发生了什么？

    事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后 TCP 连接,TCP 三次握手.. ...

  3. js学习笔记-Java script正则表达式

    创建正则表达式 js中的正则包含在两个斜杠之间:/abc+v/ 正则中的特殊字符 \: 1.当后面不是特殊字符时表示字符边界 2.当后面是特殊字符时表示转义 ^: 1.匹配首位,例如,/^A/ 并不会 ...

  4. HashMap？ConcurrentHashMap？

    Java团长在csdn 2019-02-06 19:58:00  104241  收藏 666     来源:crossoverJie(ID:crossoverJie) 前言 Map 这样的 Key ...

  5. Gradle依赖声明类型

    compileOnly -用于编译生产代码所必需的依赖关系,但不应作为运行时类路径的一部分 implementation(取代compile)-用于编译和运行时 runtimeOnly(取代runti ...

  6. 在 Spring MVC 应用程序中使用 WebMvcTest 注释有什么用处？

    在测试目标只关注 Spring MVC 组件的情况下,WebMvcTest 注释用于单元测试 Spring MVC 应用程序.在上面显示的快照中,我们只想启动 ToTestController. 执行 ...

  7. final、finalize 和 finally 的不同之处？

    final 是一个修饰符,可以修饰变量.方法和类.如果 final 修饰变量,意味着该 变量的值在初始化后不能被改变.finalize 方法是在对象被回收之前调用的方法, 给对象自己最后一个复活的机会 ...

  8. JVM 选项 -XX:+UseCompressedOops 有什么作用？ 为什么要使用？

    当你将你的应用从 32 位的 JVM 迁移到 64 位的 JVM 时,由于对象的指针从 32 位增加到了 64 位,因此堆内存会突然增加,差不多要翻倍.这也会对 CPU 缓存(容量比内存小很多)的数据 ...

  9. js--事件循环机制

    前言 我们知道JavaScript 是单线程的编程语言,只能同一时间内做一件事,按顺序来处理事件,但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这又是为什么呢?本文来总结一下js 的事件 ...

  10. CPF 使用C#的Native AOT 发布程序

    微软已经将AOT的包移到Nuget了,之前是在实验测试服务器上的.并且由之前的alpha版本改成了preview版本. C#的开发效率,接近C++的运行效率,而且可以防止反编译,可以支持大部分反射功能 ...