当前位置：网站首页 > 文章教程 > 正文

JavaScript棘手代码(三)（js代码手册）

yund56 2025-07-23 21:41 12 浏览

问题：嵌套盒子的事件处理

我们有3个嵌套的盒子（box1、box2、box3）。当点击每个盒子时，将其ID记录到控制台。点击内部盒子时，不应该触发外部盒子的点击事件。

这个问题是关于什么？
这个问题是关于JavaScript中的事件处理和事件传播，特别是如何控制嵌套HTML元素的点击事件流。

核心问题是如何防止点击内部元素时也触发其父（外部）元素的点击事件。这是Web开发中的一个常见场景，你希望特定操作只在点击特定元素时发生，而不是其容器。

解决方案：有很多方法可以实现，但更优化的方式是将所有div包装在一个id为container的父div中。

然后在父元素上添加事件监听器。

完整代码实现

HTML文件

<div id="container">
    <div id="box1" class="box">
      box1
      <div id="box2" class="box">
         box2
         <div id="box3" class="box">box3</div>
      </div>
    </div>
</div>

CSS文件

.box {
  min-width: 200px;
  width: fit-content; /* 匹配div内容宽度 */
  border: 1px solid #000;
  padding: 15px;
}

#box1 {
  background-color: yellow;
  padding: 10px;
}
#box2 {
  background-color: cyan;
  padding: 10px;
}
#box3 {
  background-color: red;
}

JavaScript文件

document.getElementById('container').addEventListener('click', event => {
  // 当点击容器元素或其任何子元素时执行
  if (event.target.classList.contains('box')) {
    /* 检查点击是否只发生在具有box类的元素上，因为我们不需要处理容器的其他子元素的点击，除了box。*/

    console.log('id is: ', event.target.id);
    event.stopPropagation(); // 防止事件在点击子元素时传播到父元素
  }
})

关键概念解释

1. 事件委托（Event Delegation）

o 在父元素上监听事件，而不是在每个子元素上

o 利用事件冒泡机制

o 减少事件监听器数量，提高性能

2. event.target

o 指向实际被点击的元素

o 不是事件监听器绑定的元素

o 用于确定具体是哪个子元素被点击

3. event.stopPropagation()

o 阻止事件继续冒泡到父元素

o 防止触发父元素的事件处理器

o 确保只有被点击的元素响应事件

4. classList.contains()

o 检查元素是否包含特定CSS类

o 用于过滤需要处理的元素

o 提供灵活的事件处理条件

性能优化考虑

重要提示：正如我之前所说，有很多方法可以解决这个问题，我们也可以为每个单独的div添加事件监听器，因为现在只有3个div，但如果数量更多，我们就需要循环等。

所以为了避免循环，我们选择了父元素。我们也可以选择<body>作为父元素，但那样脚本会搜索更大范围的代码，会耗时。因此我们将事件监听器的范围缩小到一个小的区域，即id为container的div。

替代解决方案

方案1：为每个盒子单独添加事件监听器

document.getElementById('box1').addEventListener('click', (event) => {
  console.log('id is: box1');
  event.stopPropagation();
});

document.getElementById('box2').addEventListener('click', (event) => {
  console.log('id is: box2');
  event.stopPropagation();
});

document.getElementById('box3').addEventListener('click', (event) => {
  console.log('id is: box3');
  event.stopPropagation();
});

方案2：使用事件捕获

document.getElementById('container').addEventListener('click', event => {
  if (event.target.classList.contains('box')) {
    console.log('id is: ', event.target.id);
  }
}, true); // 第三个参数true启用捕获模式

方案3：使用事件委托的现代方法

document.getElementById('container').addEventListener('click', event => {
  const box = event.target.closest('.box');
  if (box) {
    console.log('id is: ', box.id);
    event.stopPropagation();
  }
});

实际应用场景

1. 导航菜单：处理嵌套菜单项的点击

2. 表单组件：处理复杂表单中的交互

3. 卡片布局：处理卡片内部的按钮点击

4. 模态框：处理模态框内容的交互

5. 拖拽组件：处理拖拽区域内的元素

最佳实践

1. 使用事件委托：减少事件监听器数量

2. 合理的作用域：选择合适的事件监听器绑定元素

3. 性能考虑：避免在大量元素上绑定事件

4. 代码可维护性：使用类名或数据属性进行过滤

5. 浏览器兼容性：考虑不同浏览器的事件处理差异

调试技巧

// 添加调试信息
document.getElementById('container').addEventListener('click', event => {
  console.log('Event target:', event.target);
  console.log('Current target:', event.currentTarget);
  console.log('Event phase:', event.eventPhase);
  
  if (event.target.classList.contains('box')) {
    console.log('Box clicked:', event.target.id);
    event.stopPropagation();
  }
});

更多JavaScript面试相关代码请访问：

o JavaScript棘手代码第二部分

关键概念总结

1. 事件委托：在父元素上监听子元素事件

2. 事件冒泡：事件从子元素向上传播到父元素

3. 事件捕获：事件从父元素向下传播到子元素

4. stopPropagation()：阻止事件传播

5. target vs currentTarget：实际触发元素 vs 事件监听器绑定元素

扩展练习

练习1：动态添加元素的事件处理

// 动态添加新盒子
function addNewBox() {
  const container = document.getElementById('container');
  const newBox = document.createElement('div');
  newBox.className = 'box';
  newBox.id = 'box' + (document.querySelectorAll('.box').length + 1);
  newBox.textContent = newBox.id;
  container.appendChild(newBox);
}

// 事件委托自动处理新添加的元素
document.getElementById('container').addEventListener('click', event => {
  if (event.target.classList.contains('box')) {
    console.log('Clicked:', event.target.id);
  }
});

练习2：条件事件处理

document.getElementById('container').addEventListener('click', event => {
  if (event.target.classList.contains('box')) {
    const boxId = event.target.id;
    
    // 根据不同的盒子执行不同的操作
    switch(boxId) {
      case 'box1':
        console.log('外层盒子被点击');
        break;
      case 'box2':
        console.log('中层盒子被点击');
        break;
      case 'box3':
        console.log('内层盒子被点击');
        break;
    }
    
    event.stopPropagation();
  }
});

js动画效果代码

上一篇：我会在每个项目中复制这10个JS代码片段
下一篇：JavaScript的动态生成表格怎么写?

JavaScript棘手代码(三)（js代码手册）

问题：嵌套盒子的事件处理

完整代码实现

HTML文件

CSS文件

JavaScript文件

关键概念解释

1. 事件委托（Event Delegation）

2. event.target

3. event.stopPropagation()

4. classList.contains()

性能优化考虑

替代解决方案

方案1：为每个盒子单独添加事件监听器

方案2：使用事件捕获

方案3：使用事件委托的现代方法

实际应用场景

最佳实践

调试技巧

关键概念总结

扩展练习

练习1：动态添加元素的事件处理

练习2：条件事件处理

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!