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

    一、冒泡

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

            })

  • 相关阅读:
    Pytorch 实战 LESSON 5 基本优化方法与最小二乘法
    排序：快速排序（C/C++）
    Linux安装Redis（这里使用Redis6，其它版本类似）
    人工智能、深度学习、机器学习书目推荐
    小程序2.
    android编译
    LDR6328Q，快充界的黑马
    Ubuntu16.04编译测试LVI_SAM过程
    Python学习3（函数、装饰器）
    `Executor` 接口
  • 原文地址：https://blog.csdn.net/m0_65638748/article/details/126799306