博客
关于我
JavaScript HTML DOM 事件
阅读量:233 次
发布时间:2019-02-28

本文共 1341 字,大约阅读时间需要 4 分钟。

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

实例

把鼠标移到上面

点击这里

对事件做出反应

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

如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:

onclick=JavaScript

HTML 事件的例子:

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

例子 1

在本例中,当用户在 <h1> 元素上点击时,会改变其内容:

请点击该文本

例子 2

本例从事件处理器调用一个函数:

请点击该文本

HTML 事件属性

如需向 HTML 元素分配 事件,您可以使用事件属性。

实例

向 button 元素分配 onclick 事件:

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

使用 HTML DOM 来分配事件

HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:

实例

向 button 元素分配 onclick 事件:

在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时,会执行该函数。

onload 和 onunload 事件

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

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

onload 和 onunload 事件可用于处理 cookie。

实例

 

onchange 事件

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

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。

实例

onmouseover 和 onmouseout 事件

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

实例

一个简单的 onmouseover-onmouseout 实例:

把鼠标移到上面

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例:

请点击这里

更多实例

当用户按下鼠标按钮时,更换一幅图像。

当页面完成加载时,显示一个提示框。

当输入字段获得焦点时,改变其背景色。

当指针移动到元素上方时,改变其颜色;当指针移出文本后,会再次改变其颜色。

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的完整列表,请参阅 W3School 提供的 。

转载地址:http://txes.baihongyu.com/

你可能感兴趣的文章
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>