• 事件冒泡、事件捕获、事件委托

    一、冒泡

    冒泡是从下向上(内->外)，DOM元素绑定的事件被触发时，此时该元素为目标元素，目标元素执行后，它的父级元素绑定的事件会按向上的顺序执行。

    addEventListener函数的第三个参数设置为false说明不是捕获事件，即冒泡事件。

    1.   
      class="one">
    2.         one
    3.         
      class="two">
    4.             two
    5.             
      class="three">
    6.                 three
    7.                 
      class="four">
    8.                     four
    9.
  • <script>
  • document.querySelector('.one').addEventListener('click', e => {
  • console.log('one')
  • }, false)
  • document.querySelector('.two').addEventListener('click', e => {
  • console.log('two')
  • }, false)
  • document.querySelector('.three').addEventListener('click', e => {
  • console.log('three')
  • }, false)
  • document.querySelector('.four').addEventListener('click', e => {
  • console.log('four')
  • }, false)
  • // 点击one，输出one；
  • // 点击two，输出two one;
  • // 点击three，输出 three two one；
  • // 点击four，输出 four three two one；
  • script>

    • 二、捕获

    捕获则和冒泡相反，目标元素被触发后，会从目标元素的最顶层的父级元素事件往下执行到目标元素为止。

    将addEventListener函数的第三个参数设置为true即可

    操作之前的dom元素：

    点击one，输出one；
    点击two，输出one two；
    点击three，输出one two three；
    点击four，输出one two three four；

    三、事件委托

    事件委托，通俗来讲，就是把一个元素响应事件的函数委托给另一个元素，实现机制就是事件冒泡。

    假如ul列表中有很多个li，需要给这些li添加点击事件，会消耗大量的内存，可以把点击事件加到ul上，点击的时候再去匹配目标元素li

    jquery中的事件委托是这样实现的：

     1、绑定事件： 

       $('.one').on('click', '.four', function() {

                console.log('点击four')

            })

    2、删除委托事件

            $('.one').delegate('click', '.four', function() {

                console.log('点击four')

            })

  • 相关阅读:
    Leetcode刷题笔记——二分法
    Java程序设计——Swing UI 布局管理器（四）
    软考学习笔记
    .NET现代应用的产品设计 - DDD实践
    【Java每日一题】——第二十九题：超市购物程序设计（2023.10.13）
    golang 必会之 pprof 监控系列(5) —— cpu 占用率 统计原理
    Ajax技术
    # 磁盘引导方式相关知识之BIOS、msdos、MBR、UEFI、gpt、esp、csm
    从0开始学JAVA【3】
    手把手教你用Python操纵Word自动编写离职报告
  • 原文地址：https://blog.csdn.net/m0_65638748/article/details/126799306