Web前端：JavaScript鼠标事件

1. onclick（鼠标单击事件）

• 触发条件：用户用鼠标左键单击元素时触发

• 使用场景：按钮操作、菜单展开/关闭、提交表单等

• 示例代码：

  <button id="myButton">点击我</button>
  <script>
    document.getElementById("myButton").onclick = function() {
      alert("按钮被点击了！");
    };
  </script>

2. ondblclick（鼠标双击事件）

• 触发条件：用户快速连续两次单击元素（双击）

• 使用场景：编辑内容、放大图片、特殊快捷操作

• 注意：避免和 onclick 冲突（双击时会先触发两次单击事件）

• 示例：

  element.ondblclick = () => {
    element.style.fontSize = "24px"; // 双击放大文字
  };

3. onmouseover（鼠标移入事件）

• 触发条件：鼠标指针进入元素区域时触发

• 特性：会冒泡（子元素触发时会传播到父元素）

• 使用场景：显示工具提示、高亮元素

element.onmouseover = () => {
  element.style.backgroundColor = "yellow";
};

4. onmouseout（鼠标移出事件）

• 触发条件：鼠标指针离开元素区域时触发

• 特性：会冒泡

• 使用场景：恢复元素样式、隐藏提示框

  element.onmouseout = () => {
    element.style.backgroundColor = "";
  };

5. onmouseenter（鼠标进入事件）

• 触发条件：鼠标指针进入元素区域时触发（类似 onmouseover）

• 关键区别：不冒泡（只在当前元素触发，不传播到父元素）

• 使用场景：需要精准控制目标元素时

// 父元素不会收到子元素的 enter/leave 事件
parent.onmouseenter = () => console.log("父元素触发");
child.onmouseenter = () => console.log("子元素触发"); 

6. onmouseleave（鼠标离开事件）

• 触发条件：鼠标指针离开元素区域时触发

• 关键区别：不冒泡

• 使用场景：与 onmouseenter 配对使用

element.onmouseleave = () => {
  resetElementStyle(); // 离开时重置样式
};

7. onkeydown（键盘按下事件）

• 触发条件：键盘按键被按下瞬间触发

• 关键特性：

  • 可检测所有键（包括功能键 Ctrl/Shift/Alt 等）

  • 按住不放会连续触发

 获取按键信息：

inputField.onkeydown = (event) => {
  console.log("按下的键：" + event.key);        // 键名（如 "Enter"）
  console.log("键码：" + event.keyCode);      // 已弃用，但仍有使用
  console.log("组合键：" + event.ctrlKey);    // 是否按了Ctrl
};

• 使用场景：快捷键、输入验证、游戏控制

• 阻止默认行为（如阻止输入）：

  if(event.key === " ") event.preventDefault(); // 禁止输入空格