js- DOM事件之按钮绑定函数注意事项

本文介绍了一个简单的HTML页面示例,该页面包含一个按钮,并通过JavaScript为按钮绑定了点击事件。当用户点击按钮时,会弹出提示框显示点击信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>


    <!-- 写在元素前面,要用onload -->


    <script type="text/javascript">
        window.onload=function(){
            var oBtn=document.getElementById("btn")
            function click(){
                alert("我被点击了")
            }

            oBtn.onclick=click;


            // 按钮绑定函数不需要括号,否则函数会一打开页面就执行


        }
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>
</html>
<think>我们正在查找JavaScript中可以绑定DOM元素的所有事件类型。由于事件类型非常多,且随着Web标准的发展不断增加,这里将列出主要的事件类型,并按照类别进行组织。 ### 主要事件类别 1. **鼠标事件**:与鼠标交互相关的事件。 2. **键盘事件**:与键盘输入相关的事件。 3. **表单事件**:与表单元素交互相关的事件。 4. **窗口事件**:与浏览器窗口相关的事件。 5. **媒体事件**:与音频、视频等媒体元素相关的事件。 6. **拖放事件**:与元素拖放相关的事件。 7. **剪贴板事件**:与剪贴板操作相关的事件。 8. **焦点事件**:与元素焦点相关的事件。 9. **网络事件**:与网络状态相关的事件(如XMLHttpRequest)。 10. **CSS事件**:与CSS相关的事件(如过渡、动画)。 11. **打印事件**:与打印相关的事件。 12. **资源事件**:与资源加载相关的事件(如img、script)。 13. **视图事件**:与视图相关的事件(如窗口大小变化)。 14. **其他事件**:其他未归类的常见事件。 ### 事件类型列表 #### 1. 鼠标事件 - `click`:点击事件(按下并释放鼠标按钮)。 - `dblclick`:双击事件- `mousedown`:鼠标按钮按下。 - `mouseup`:鼠标按钮释放。 - `mousemove`:鼠标在元素上移动。 - `mouseover`:鼠标移入元素。 - `mouseout`:鼠标移出元素。 - `mouseenter`:鼠标移入元素(不冒泡)。 - `mouseleave`:鼠标移出元素(不冒泡)。 - `contextmenu`:右键菜单事件。 #### 2. 键盘事件 - `keydown`:按下键盘按键。 - `keyup`:释放键盘按键。 - `keypress`:按下并释放键盘按键(已废弃,不推荐使用)。 #### 3. 表单事件 - `submit`:表单提交。 - `reset`:表单重置。 - `change`:表单元素值改变(如输入框、下拉框)。 - `input`:输入元素值改变(实时)。 - `focus`:元素获得焦点。 - `blur`:元素失去焦点。 - `select`:文本被选中(如input、textarea)。 #### 4. 窗口事件 - `resize`:窗口大小改变。 - `scroll`:元素滚动条滚动。 - `load`:页面或资源加载完成。 - `unload`:页面卸载(关闭或刷新)。 - `beforeunload`:页面即将卸载(可询问用户是否离开)。 #### 5. 媒体事件 - `play`:媒体开始播放。 - `pause`:媒体暂停。 - `ended`:媒体播放结束。 - `timeupdate`:播放位置改变。 - `volumechange`:音量改变。 - `canplay`:媒体可以开始播放(但可能需要缓冲)。 - `error`:加载媒体时发生错误。 #### 6. 拖放事件 - `drag`:元素被拖动。 - `dragstart`:开始拖动元素。 - `dragend`:拖动结束。 - `dragover`:元素在拖动目标上方移动。 - `dragenter`:拖动进入目标元素。 - `dragleave`:拖动离开目标元素。 - `drop`:在目标元素上释放拖动元素。 #### 7. 剪贴板事件 - `copy`:复制操作。 - `cut`:剪切操作。 - `paste`:粘贴操作。 #### 8. 焦点事件 - `focusin`:元素即将获得焦点(冒泡)。 - `focusout`:元素即将失去焦点(冒泡)。 #### 9. 网络事件 - `online`:网络连通。 - `offline`:网络断开。 - `readystatechange`:XMLHttpRequest对象的状态变化。 #### 10. CSS事件 - `transitionstart`:CSS过渡开始。 - `transitionend`:CSS过渡结束。 - `transitionrun`:CSS过渡运行中。 - `animationstart`:CSS动画开始。 - `animationend`:CSS动画结束。 - `animationiteration`:CSS动画重复播放。 #### 11. 打印事件 - `beforeprint`:打印前触发。 - `afterprint`:打印后触发。 #### 12. 资源事件 - `load`:资源加载完成。 - `error`:资源加载错误。 - `abort`:资源加载中止。 #### 13. 视图事件 - `resize`:窗口大小改变(也属于窗口事件)。 - `scroll`:元素滚动(也属于窗口事件)。 #### 14. 其他事件 - `DOMContentLoaded`:HTML文档加载完成(不等待样式表、图像)。 - `hashchange`:URL的hash部分改变。 ### 注意事项 - 以上列表并不完全,因为不同浏览器或特定环境(如移动设备)可能有额外事件- 一些事件可能属于多个类别(如`resize`和`scroll`同时属于窗口事件和视图事件)。 - 随着Web标准的发展,会有新的事件出现(如Pointer Events,用于统一鼠标、触摸、触控笔事件)。 ### 如何获取所有事件? 在JavaScript中,我们可以通过遍历`window`对象或特定元素的属性来获取事件列表,但这不是标准方法。通常,我们参考MDN等文档获取完整事件列表。 ### 参考 [^1]: [MDN Web Events](https://developer.mozilla.org/en-US/docs/Web/Events) §§相关问题§§ 1. 如何动态绑定和解绑事件处理函数? 2. 事件冒泡和事件捕获有什么区别? 3. 如何阻止事件的默认行为和事件传播? 4. 移动端特有的触摸事件有哪些? 5. 如何自定义事件并触发?</think>### JavaScript DOM元素支持的事件类型列表 JavaScript中的DOM元素支持多种事件类型,涵盖用户交互、资源加载、状态变更等场景。以下是按类别整理的主要事件类型(基于DOM Level 3和HTML5标准)[^1]: --- #### 一、鼠标事件 1. `click`:元素被点击 2. `dblclick`:元素被双击 3. `mousedown`:鼠标按钮按下 4. `mouseup`:鼠标按钮释放 5. `mousemove`:鼠标在元素上移动 6. `mouseover`:鼠标移入元素 7. `mouseout`:鼠标移出元素 8. `mouseenter`:鼠标进入元素(不冒泡) 9. `mouseleave`:鼠标离开元素(不冒泡) 10. `contextmenu`:右键菜单触发 #### 二、键盘事件 1. `keydown`:按键按下 2. `keyup`:按键释放 3. `keypress`:按键按下并产生字符(已废弃,建议用`keydown`) #### 三、表单事件 1. `submit`:表单提交 2. `reset`:表单重置 3. `change`:表单元素值改变 4. `input`:输入框值实时变化 5. `focus`:元素获得焦点 6. `blur`:元素失去焦点 7. `select`:文本被选中 #### 四、窗口/文档事件 1. `load`:页面或资源加载完成 2. `DOMContentLoaded`:HTML解析完成(无需等待样式/图片) 3. `resize`:窗口大小改变 4. `scroll`:元素滚动 5. `hashchange`:URL哈希变化 6. `beforeunload`:页面关闭前警告 #### 五、媒体事件 1. `play`:媒体开始播放 2. `pause`:媒体暂停 3. `ended`:媒体播放结束 4. `volumechange`:音量改变 5. `timeupdate`:播放进度更新 #### 六、拖放事件 1. `dragstart`:开始拖动 2. `drag`:拖动中 3. `dragend`:拖动结束 4. `dragover`:元素在拖动目标上方 5. `drop`:元素被释放到目标 #### 七、剪贴板事件 1. `copy`:复制操作 2. `cut`:剪切操作 3. `paste`:粘贴操作 #### 八、其他关键事件 1. `error`:资源加载失败 2. `online`/`offline`:网络状态变化 3. `transitionend`:CSS过渡结束 4. `animationstart`:CSS动画开始 5. `fullscreenchange`:全屏模式切换 --- ### 查看完整列表的方法 1. **浏览器控制台**: ```javascript console.log(Object.keys(window).filter(k => k.startsWith('on'))); ``` 输出所有以`on`开头的事件属性(如`onclick`)。 2. **MDN文档**: 参考[MDN Event Reference](https://developer.mozilla.org/en-US/docs/Web/Events)获取最新事件列表[^1]。 --- ### 注意事项 - **事件兼容性**:部分事件(如`touch`事件)需考虑移动端兼容性。 - **自定义事件**:可通过`new CustomEvent()`创建自定义事件- **事件委托**:推荐使用`addEventListener()`绑定事件,支持冒泡阶段捕获。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值