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

    一、冒泡

    冒泡是从下向上(内->外)，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')

            })

  • 相关阅读:
    【Web前端】一文带你吃透CSS(中篇)
    【JVM深层系列】「云原生时代的Java虚拟机」针对于GraalVM的技术知识脉络的重塑和探究
    stable-diffusion-webui之api
    C++中GDAL批量创建多个栅格图像文件并批量写入数据
    Spring【Spring事务（事务简介、Spring事务管理方案 、Spring事务管理器、控制的API、相关配置 ）】(七)-全面详解（学习总结---从入门到深化）
    01UE4 C++ 入门【初识c++类】
    【Python】基于欧拉角的刚体转动仿真演示
    Java中的重载和重写
    【VTK.js】学习笔记一：搭建环境，实现官网例子
    Java面试：Redis消息队列实现异步秒杀
  • 原文地址：https://blog.csdn.net/m0_65638748/article/details/126799306