优化多元素交互：JavaScript事件委托实践指南

<div id='research'>
  <div class='textblock'>
    <!-- 文本内容 -->
  </div>
  <div class='myimage koek-achtergrond'>
    <!-- 背景图片 -->
  </div>
  <div class='myimage koek-stripe'>
    <!-- 条纹图片 -->
  </div>
</div>
<!-- 其他列结构类似，ID不同 -->

// 通用事件处理函数
function mouseoverHandler() {
  const column = document.getElementById(this.id);
  column.style.backgroundColor = 'black';
  const stripe = column.getElementsByClassName('koek-stripe')[0];
  if (stripe) stripe.classList.add('koek-stripe-hovered');
  const background = column.getElementsByClassName('koek-achtergrond')[0];
  if (background) background.classList.add('koek-transform');
}

function mouseleaveHandler() {
  const column = document.getElementById(this.id);
  column.style.backgroundColor = 'var(--primary-blue-color)'; // 假设已定义CSS变量
  const stripe = column.getElementsByClassName('koek-stripe')[0];
  if (stripe) stripe.classList.remove('koek-stripe-hovered');
  const background = column.getElementsByClassName('koek-achtergrond')[0];
  if (background) background.classList.remove('koek-transform');
}

// 为每个列重复绑定（例如，在每个列的HTML下方添加一个script块）
// 这种方式会导致问题
// 示例 for 'research' column
/*
<script>
  var columnname = 'research';
  var columnElement = document.getElementById(columnname);
  // 错误：这里重复绑定了事件，且在onmouseover/onmouseleave内部再次调用addEventListener是多余的且可能导致问题
  columnElement.onmouseover = function() {
    columnElement.addEventListener('mouseover', mouseoverHandler); // 错误示范
  }
  columnElement.onmouseleave = function() {
    columnElement.addEventListener('mouseleave', mouseleaveHandler); // 错误示范
  }
</script>
*/

/* 示例CSS变量 */
:root {
  --primary-blue-color: #007bff; /* 假设的蓝色 */
}

/* 悬停时添加的类 */
.koek-stripe-hovered {
  /* 例如：背景条纹变化 */
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.koek-transform {
  /* 例如：背景图片放大 */
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 确保列可交互 */
[id='research'], [id='about'], [id='contact'] { /* 针对所有列 */
  cursor: pointer; /* 提示用户可交互 */
  transition: background-color 0.3s ease; /* 背景色平滑过渡 */
}

// 统一的事件处理函数
function handleColumnHover(event) {
  // 使用 event.target.closest() 找到最近的、具有ID的父级元素，
  // 假设这些ID就是我们的列ID (e.g., 'research', 'about', 'contact')
  const interactiveColumn = event.target.closest('[id]');

  // 确保找到的元素是我们感兴趣的列，可以添加更具体的选择器
  // 例如：event.target.closest('.my-interactive-column') 如果所有列都有一个共同类
  // 这里我们假设所有顶级ID元素都是我们的列
  if (!interactiveColumn || !['research', 'about', 'contact'].includes(interactiveColumn.id)) {
    return; // 如果不是目标列，则不执行任何操作
  }

  // 根据事件类型应用或移除样式
  if (event.type === 'mouseover') {
    interactiveColumn.style.backgroundColor = 'black';
    const stripe = interactiveColumn.getElementsByClassName('koek-stripe')[0];
    if (stripe) stripe.classList.add('koek-stripe-hovered');
    const background = interactiveColumn.getElementsByClassName('koek-achtergrond')[0];
    if (background) background.classList.add('koek-transform');
  } else if (event.type === 'mouseout') {
    interactiveColumn.style.backgroundColor = 'var(--primary-blue-color)'; // 使用CSS变量
    const stripe = interactiveColumn.getElementsByClassName('koek-stripe')[0];
    if (stripe) stripe.classList.remove('koek-stripe-hovered');
    const background = interactiveColumn.getElementsByClassName('koek-achtergrond')[0];
    if (background) background.classList.remove('koek-transform');
  }
}

// 将单个事件监听器绑定到文档
// 注意：对于鼠标悬停，通常使用 'mouseover' 和 'mouseout' 进行事件委托，
// 因为它们会冒泡。'mouseenter' 和 'mouseleave' 不会冒泡。
document.addEventListener('mouseover', handleColumnHover);
document.addEventListener('mouseout', handleColumnHover);