参考资料

1. HTML DOM 哪个鼠标键被点击了？
2. HTML DOM 返回文档中的所有cookies的名称/值对 实例
3. HTML DOM将下拉列表变成多行列表
4. HTML DOM 返回图像映射的某个区域的target的值 实例
5. HTML DOM 返回文档中第一个锚的 innerHTML
6. HTML DOM 返回图像映射某个区域的替代文字实例
7. HTML DOM 返回一个表单的name 实例
8. HTML DOM 根节点

HTML DOM 事件格式化

简介

HTML DOM 事件是当用户与网页交互时发生的动作，如点击、鼠标移动、键盘输入等。事件格式化是指对这些事件进行标准化处理和组织。

常用事件标签

鼠标事件

• onclick - 元素被点击时触发

• ondblclick - 元素被双击时触发

• onmouseover - 鼠标移到元素上时触发

• onmouseout - 鼠标移出元素时触发

• onmousedown - 鼠标按钮在元素上按下时触发

• onmouseup - 鼠标按钮在元素上释放时触发

• onmousemove - 鼠标在元素上移动时触发

键盘事件

• onkeydown - 键盘按键被按下时触发

• onkeyup - 键盘按键被释放时触发

• onkeypress - 键盘按键被按下并释放时触发

表单事件

• onchange - 表单元素内容改变时触发

• onsubmit - 表单提交时触发

• onreset - 表单重置时触发

• onselect - 文本被选中时触发

• onfocus - 元素获得焦点时触发

• onblur - 元素失去焦点时触发

窗口事件

• onload - 页面完成加载时触发

• onunload - 用户离开页面时触发

• onresize - 窗口或框架被调整大小时触发

• onscroll - 滚动条被滚动时触发

使用方法

HTML 属性方式

<button onclick="alert('按钮被点击')">点击我</button>

DOM 属性方式

document.getElementById("myBtn").onclick = function() {
  alert("按钮被点击");
};

事件监听器方式

document.getElementById("myBtn").addEventListener("click", function() {
  alert("按钮被点击");
});

功能说明

• 实现用户交互响应

• 动态修改页面内容和样式

• 验证表单输入

• 创建动画效果

• 处理异步操作

CSS 扩展

可以通过事件触发 CSS 样式变化：

<style>
  .highlight {
    background-color: yellow;
  }
</style>

<div onmouseover="this.classList.add('highlight')" 
     onmouseout="this.classList.remove('highlight')">
  鼠标悬停我会高亮
</div>

示例说明

示例1：点击计数器

<button id="counterBtn">点击次数: 0</button>

<script>
  let count = 0;
  document.getElementById("counterBtn").addEventListener("click", function() {
    count++;
    this.textContent = "点击次数: " + count;
  });
</script>

示例2：表单验证

<form onsubmit="return validateForm()">
  <input type="text" id="username" required>
  <input type="submit" value="提交">
</form>

<script>
  function validateForm() {
    const username = document.getElementById("username").value;
    if(username.length < 3) {
      alert("用户名至少需要3个字符");
      return false;
    }
    return true;
  }
</script>

示例3：键盘事件

<input type="text" id="keyInput" placeholder="输入内容...">
<p id="keyInfo"></p>

<script>
  document.getElementById("keyInput").addEventListener("keyup", function(e) {
    document.getElementById("keyInfo").textContent = 
      `你输入了: ${this.value} (按键代码: ${e.keyCode})`;
  });
</script>