JavaScript 常见事件与事件处理

JavaScript 常见事件与事件处理

JavaScript 事件是用户或浏览器与网页交互时发生的动作。以下是常见的 JavaScript 事件以及事件处理方式。示例代码采用DOM的事件处理方式编写，在文章末尾另外附有采用HTML属性绑定方式来处理事件的代码。

一、鼠标事件

1. click - 元素被点击时触发

   element.addEventListener('click', () => console.log('点击事件'));
   

2. dblclick - 元素被双击时触发

   element.addEventListener('dblclick', () => console.log('双击事件'));
   

3. mouseenter - 鼠标指针进入元素时触发（不冒泡）

   element.addEventListener('mouseenter', () => console.log('鼠标进入'));
   

4. mouseleave - 鼠标指针离开元素时触发（不冒泡）

   element.addEventListener('mouseleave', () => console.log('鼠标离开'));
   

5. mousemove - 鼠标在元素内移动时持续触发

   element.addEventListener('mousemove', (e) => {
     console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
   });
   

6. mouseover/mouseout - 类似 mouseenter/mouseleave 但会冒泡

7. mousedown/mouseup - 鼠标按键按下/释放时触发

二、键盘事件

1. keydown - 键盘按键按下时触发

   document.addEventListener('keydown', (e) => {
     console.log(`按下键: ${e.key}, 键码: ${e.keyCode}`);
   });
   

2. keyup - 键盘按键释放时触发

   document.addEventListener('keyup', (e) => {
     if (e.key === 'Enter') console.log('回车键释放');
   });
   

3. keypress - 按键按下并产生字符时触发（已废弃，不推荐使用）

三、表单事件

1. submit - 表单提交时触发

   form.addEventListener('submit', (e) => {
     e.preventDefault(); // 阻止表单默认提交行为
     console.log('表单提交');
   });
   

2. change - 表单元素值改变并失去焦点时触发

   input.addEventListener('change', () => console.log('值已改变'));
   

3. input - 输入框值变化时实时触发

   input.addEventListener('input', (e) => {
     console.log(`当前值: ${e.target.value}`);
   });
   

4. focus/blur - 元素获得/失去焦点时触发

   input.addEventListener('focus', () => console.log('获得焦点'));
   input.addEventListener('blur', () => console.log('失去焦点'));
   

四、窗口/文档事件

1. load - 页面或资源加载完成时触发

   window.addEventListener('load', () => console.log('页面完全加载'));
   

2. DOMContentLoaded - HTML文档完全加载和解析后触发（无需等待样式表、图像等）

   document.addEventListener('DOMContentLoaded', () => {
     console.log('DOM已就绪');
   });
   

3. resize - 浏览器窗口大小改变时触发

   window.addEventListener('resize', () => {
     console.log(`窗口大小: ${window.innerWidth}x${window.innerHeight}`);
   });
   

4. scroll - 元素或窗口滚动时触发

   window.addEventListener('scroll', () => {
     console.log(`滚动位置: ${window.scrollY}`);
   });
   

五、触摸事件（移动端）

1. touchstart - 手指触摸屏幕时触发

   element.addEventListener('touchstart', (e) => {
     console.log(`触摸开始: ${e.touches[0].clientX}, ${e.touches[0].clientY}`);
   });
   

2. touchmove - 手指在屏幕上移动时触发

   element.addEventListener('touchmove', (e) => {
     e.preventDefault(); // 阻止默认滚动行为
     console.log('手指移动中');
   });
   

3. touchend - 手指离开屏幕时触发

六、其他常用事件

1. contextmenu - 右键菜单显示前触发

   element.addEventListener('contextmenu', (e) => {
     e.preventDefault();
     console.log('自定义右键菜单');
   });
   

2. paste/copy/cut - 剪贴板操作时触发

   input.addEventListener('paste', () => console.log('粘贴操作'));
   

3. transitionend/animationend - CSS过渡/动画结束时触发

   element.addEventListener('transitionend', () => console.log('过渡结束'));
   

事件处理最佳实践

1. 使用事件委托 - 减少事件监听器数量

   document.getElementById('list').addEventListener('click', (e) => {
     if (e.target.tagName === 'LI') {
       console.log('点击了列表项:', e.target.textContent);
     }
   });
   

2. 节流和防抖 - 优化频繁触发的事件

   // 防抖示例
   function debounce(fn, delay) {
     let timer;
     return function() {
       clearTimeout(timer);
       timer = setTimeout(() => fn.apply(this, arguments), delay);
     };
   }
   
   window.addEventListener('resize', debounce(() => {
     console.log('调整后的窗口大小:', window.innerWidth);
   }, 250));
   

3. 及时移除事件 - 避免内存泄漏

   function handleClick() { /*...*/ }
   
   // 添加事件
   element.addEventListener('click', handleClick);
   
   // 移除事件
   element.removeEventListener('click', handleClick);
   

下面是使用HTML内联事件属性(on*)方式重写的常见JavaScript事件示例：

一、鼠标事件

<!-- click 点击事件 -->
<button onclick="console.log('按钮被点击了')">点击我</button>

<!-- dblclick 双击事件 -->
<div ondblclick="console.log('元素被双击了')">双击我</div>

<!-- mouseenter/mouseleave 鼠标进入/离开 -->
<div onmouseenter="console.log('鼠标进入')" 
     onmouseleave="console.log('鼠标离开')">
  鼠标悬停区域
</div>

<!-- mousemove 鼠标移动 -->
<div onmousemove="console.log(`鼠标位置: ${event.clientX},${event.clientY}`)">
  鼠标移动跟踪区
</div>

二、键盘事件

<!-- keydown/keyup 键盘按下/释放 -->
<input type="text" 
       onkeydown="console.log('按下键:', event.key)" 
       onkeyup="console.log('释放键:', event.key)">

<!-- 回车键特殊处理 -->
<input type="text" onkeyup="if(event.key === 'Enter') console.log('按了回车键')">

三、表单事件

<!-- submit 表单提交 -->
<form onsubmit="console.log('表单提交'); return false">
  <input type="submit" value="提交">
</form>

<!-- change 值改变 -->
<select onchange="console.log('选择的值:', this.value)">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<!-- input 输入时实时触发 -->
<input type="text" oninput="console.log('输入内容:', this.value)">

<!-- focus/blur 焦点获取/失去 -->
<input type="text" 
       onfocus="console.log('获得焦点')" 
       onblur="console.log('失去焦点')">

四、窗口/文档事件

<!-- load 页面加载完成 -->
<body onload="console.log('页面加载完成')">
  <!-- 页面内容 -->
</body>

<!-- resize 窗口大小改变 -->
<script>
  // HTML属性方式无法直接绑定到window，需要在脚本中设置
  window.onresize = function() {
    console.log(`窗口大小: ${innerWidth}x${innerHeight}`);
  };
</script>

五、其他常用事件

<!-- contextmenu 右键菜单 -->
<div oncontextmenu="console.log('右键点击'); return false">
  右键点击我(禁止默认菜单)
</div>

<!-- copy/paste 剪贴板操作 -->
<input type="text" 
       oncopy="console.log('复制操作')" 
       onpaste="console.log('粘贴操作')">

<!-- 鼠标按键按下/释放 -->
<div onmousedown="console.log('鼠标按下')" 
     onmouseup="console.log('鼠标释放')">
  点击测试区
</div>

注意事项

1. 在HTML属性中，可以直接使用 event 对象访问事件数据
2. 可以访问 this 关键字指向当前元素
3. 要阻止默认行为需要 return false
4. 复杂逻辑建议调用单独定义的函数：

<script>
  function handleClick(msg) {
    console.log(msg, new Date());
  }
</script>

<button onclick="handleClick('按钮被点击')">带参数的点击</button>

5. 这种方式的局限性：
   • 只能绑定一个处理函数
   • 混合了HTML和JavaScript代码
   • 不利于维护和调试
   • 无法使用事件委托等高级特性

虽然HTML属性绑定方式简单直接，但在现代前端开发中，建议优先使用 addEventListener 的方式绑定事件，以获得更好的灵活性和可维护性。