参考资料

1. HTML DOM 用指定的Name弹出元素的数量实例
2. HTML DOM为表格创建一个标题
3. HTML DOM 返回一个button所属表的ID 实例
4. HTML DOM 返回图像映射的某个区域的href 实例
5. HTML DOM 返回文档中的链接数
6. HTML DOM 返回图像映射某个区域的坐标实例
7. HTML DOM改变单元格横跨的列数(colspan属性)
8. HTML DOM 返回一个iframe中的longdesc属性的值

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);
}