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>