在前端开发中，与 onfocus、onclick 类似的交互函数（事件处理程序）有很多，它们用于监听不同类型的用户交互或浏览器事件。以下是一些常见的事件类型及其对应的事件处理程序：
- 鼠标事件 onclick：元素被点击时触发。 onmouseover：鼠标指针移动到元素上时触发。 onmouseout：鼠标指针移出元素时触发。 onmousedown：鼠标按钮在元素上按下时触发。 onmouseup：鼠标按钮在元素上释放时触发。 onmousemove：鼠标在元素上移动时持续触发。
- 键盘事件 onkeydown：键盘按键被按下时触发。 onkeyup：键盘按键被释放时触发。 onkeypress：按下并释放键盘按键时触发（不包括系统功能键）。
- 表单事件 onfocus：元素获得焦点时触发（如输入框被点击或通过 Tab 键选中）。 onblur：元素失去焦点时触发。 onchange：元素值发生变化且失去焦点时触发（常用于表单控件）。 oninput：元素值发生变化时立即触发（实时监听输入）。 onsubmit：表单提交时触发（用于
- 窗口 / 页面事件
onload：页面或资源加载完成时触发（常用于 或
等元素）。 onunload：页面即将卸载时触发（如关闭页面或跳转）。 onresize：浏览器窗口大小改变时触发。 onscroll：元素滚动时触发（常用于 或可滚动容器）。 onbeforeunload：页面卸载前触发（可用于提示用户确认离开）。
- 触摸事件（移动设备） ontouchstart：触摸屏幕开始时触发。 ontouchmove：触摸点在屏幕上移动时触发。 ontouchend：触摸结束（手指离开屏幕）时触发。 ontouchcancel：触摸操作被中断时触发（如来电）。
- 其他事件 onerror：资源加载失败时触发（如图片加载失败）。 onselect：文本被选中时触发（常用于输入框或文本区域）。 ondblclick：元素被双击时触发。 ondrag：元素被拖动时触发。 ondrop：在拖放操作结束时触发（当元素被放置到目标位置）。 使用示例 以下是几种事件的实际应用示例： html 预览 <!-- 鼠标事件 --> <button onclick=alert('点击按钮')">点击我 <div onmouseover=this.style.backgroundColor='red'" onmouseout=this.style.backgroundColor='white'">悬停测试
<!-- 键盘事件 --> <input type="text" onkeydown=console.log('按键按下')">
<!-- 表单事件 -->
<form onsubmit=return validateForm()">
<!-- 窗口事件 --> <body onload=initPage()"> <div onscroll=checkScrollPosition()">滚动内容
[xss_clean] function validateForm() { // 表单验证逻辑 return false; // 阻止表单提交 }
function initPage() { console.log('页面加载完成'); }
function checkScrollPosition() { console.log('滚动位置变化'); } [xss_clean] 注意事项 DOM0 级 vs DOM2 级事件： onclick 等是 DOM0 级事件（直接在 HTML 中绑定），写法简单但有局限性（每个元素只能绑定一个处理函数）。 DOM2 级事件（如 addEventListener）更灵活，支持多个处理函数，推荐在 JavaScript 中使用： javascript document.getElementById('myButton').addEventListener('click', function() { console.log('按钮被点击'); });
事件冒泡与捕获： 事件会在 DOM 树中传播（冒泡或捕获），可通过 event.stopPropagation() 阻止。 兼容性： 现代浏览器支持大多数事件，但部分触摸事件（如 ontouchstart）在桌面设备上可能无效。 React/Vue 等框架中的事件： 框架通常有自己的事件绑定语法（如 React 的 onClick，Vue 的 @click），原理类似但写法不同。 根据具体场景选择合适的事件处理程序，可以实现丰富的交互效果。