HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子:

  • HTML 网页完成加载
  • HTML 输入字段被修改
  • HTML 按钮被点击

通常,当事件发生时,用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号或双引号:

<element event="一些 JavaScript">
<element event='一些 JavaScript'>

在下面的例子中,onclick 属性(以及代码)被添加到 <button> 元素:

实例

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>

JavaScript 代码通常有很多行。事件属性调用函数更为常见:

实例

<button onclick="displayDate()">现在的时间是?</button>

常见的 HTML 事件

下面是一些常见的 HTML 事件:

事件 描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML 元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载

松软科技web课堂:JavaScript 事件的更多相关文章

  1. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  2. 松软科技Web课堂:JavaScript JSON

    JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...

  3. 松软科技Web课堂:JavaScript 异常

    JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...

  4. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  5. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  6. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  7. 松软科技Web课堂:JavaScript For 循环

    循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...

  8. 松软科技web课堂:JavaScript If...Else 语句

    条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...

  9. 松软科技web课堂:JavaScript 比较和逻辑运算符

    JavaScript 比较和逻辑运算符 比较和逻辑运算符用于测试 true 或 false. 比较运算符 比较运算符在逻辑语句中使用,以判定变量或值是否相等. 我们给定 x = 5,下表中解释了比较运 ...

随机推荐

  1. Asp.net 学习记录(一)使用asp.net 构建webAPI接口

    此系列使用Asp.net构建前后端分离的博客网站. 创建一个asp.net项目 我们这里使用的是空模板,把Https配置去掉(安全先不配置) 构建webapi接口有很多方法,在这里我们选择最简单的2种 ...

  2. Samba CVE-2017-7494验证实验

    漏洞简介 Samba是在Linux和UNIX系统上实现SMB协议的一个软件,不少IoT设备也使用了Samba.2017年5月24日Samba发布了4.6.4版本,修复了一个严重的远程代码执行漏洞,漏洞 ...

  3. Linux-3.14.12内存管理笔记【伙伴管理算法(4)】

    此处承接前面未深入分析的页面释放部分,主要详细分析伙伴管理算法中页面释放的实现.页面释放的函数入口是__free_page(),其实则是一个宏定义. 具体实现: [file:/include/linu ...

  4. 2019前端面试系列——CSS面试题

    盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; marg ...

  5. 源码分析RocketMQ ACL实现机制

    目录 1.BrokerController#initialAcl 2.PlainAccessValidator 2.1 类图 2.2 构造方法 2.3 parse方法 2.4 validate 方法 ...

  6. mysql优化:覆盖索引(延迟关联)

    前言 上周新系统改版上线,上线第二天就出现了较多的线上慢sql查询,紧接着dba 给出了定位及解决方案,这里较多的是使用延迟关联去优化. 而我对于这个延迟关联也是第一次听说(o(╥﹏╥)o),所以今天 ...

  7. Dev 日志 | 如何将 jar 包发布到 Maven 中央仓库

    摘要 Maven 中央仓库并不支持直接上传 jar 包,因此需要将 jar 包发布到一些指定的第三方 Maven 仓库,比如:Sonatype OSSRH 仓库,然后该仓库再将 jar 包同步到 Ma ...

  8. Python小技巧:打印出来的文本文档中间有空格

    问题描述: 在file.txt中存了内容如下 AAAAAA BBBBBB CCCCCC 然后采用python显示,发现显示出来的是这样的 A A A A A A B B B B B B C C C C ...

  9. Cesium专栏-填挖方分析(附源码下载)

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  10. C lang:Array_Multidimensional arrays

    #include<stdio.h> #include<windows.h> #define YEARS 5 #define MONTHS 12 void color(short ...