JavaScript HTML DOM 事件

html dom 使 JavaScript 有能力对 HTML 事件做出反应

对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时

如果想要在用户点击某个元素时执行代码，需要给一个 HTML 事件属性添加 JavaScript 代码

HTML 事件的触发行为：

• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当输入字段被改变时
• 当提交 HTML 表单时
• 当用户触发按键时

下面的范例中，当用户在 <h1> 元素上点击时，会改变其内容

下面的范例从事件处理器调用一个函数

HTML 事件属性

如果想要给 HTML 元素分配 事件，可以使用事件属性

下面的范例给 button 元素分配 onclick 事件

上面的范例中，名为 displayDate 的函数将在按钮被点击时执行

使用 HTML DOM 来分配事件

HTML DOM 允许我们使用 JavaScript 来向 HTML 元素分配事件

下面的代码向 button 元素分配 onclick 事件

上面的范例中，名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素

按钮点击时 Javascript 函数将会被执行

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本

onload 和 onunload 事件可用于处理 cookie

onchange 事件

onchange 事件常用语结合对输入字段的验证来使用

下面的范例使用了 onchange 事件，当用户改变输入字段的内容时，会调用 upperCase() 函数

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分

首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件

更多范例

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！