HTML DOM 哪个元素被按下了？

HTML DOM 元素按下检测

详细介绍

在HTML DOM中，可以通过事件对象(event object)来检测哪个元素被按下了。当用户与页面交互时（如点击、按键等），浏览器会创建一个事件对象，其中包含被操作元素的信息。

相关标签和属性

1. event.target - 指向触发事件的元素

2. event.currentTarget - 指向当前处理事件的元素

3. this - 在事件处理函数中，通常指向绑定事件的元素

用法

element.addEventListener('click', function(event) {
  // 在这里检测被按下的元素
  console.log(event.target);
});

实例

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>

<script>
document.getElementById('btn1').addEventListener('click', function(event) {
  console.log('按下的按钮ID:', event.target.id); // 输出 "btn1"
});

document.getElementById('btn2').addEventListener('click', function(event) {
  console.log('按下的按钮ID:', event.target.id); // 输出 "btn2"
});
</script>

功能扩展

CSS 伪类

可以通过CSS伪类来可视化被按下的元素状态：

/* 普通状态 */
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
}

/* 按下状态 */
button:active {
  background-color: #3e8e41;
  transform: translateY(1px);
}

JavaScript 扩展

// 检测文档中任何元素的点击
document.addEventListener('click', function(event) {
  console.log('被按下的元素:', event.target.tagName);
  
  // 添加临时按下效果
  event.target.classList.add('active');
  setTimeout(() => {
    event.target.classList.remove('active');
  }, 200);
});

配套CSS:

.active {
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
  transform: scale(0.98);
}