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. 【数据库】SQLite3的安装

    版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ SQLite3的安装 离线安装 SQLite3安装包 下载SQLite3安装包,将文件 ...

  2. 破解另一家网站的反爬机制 & HMAC 算法

    零.写在前面 本文涉及的反爬技术,仅供个人技术学习,禁止并做到: 干扰被访问网站的正常运行 抓取受到法律保护的特定类型的数据或信息 搜集到的数据禁止传播.交给第三方使用.或者牟利 如有可能,在爬到数据 ...

  3. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

  4. react中报错Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported

    产生这个报错的原因是我当时将样式写到了less文件,我在div中使用的使用应该是使用className = ,而我误写了一个style = .style里面当然没有自定义的className,所以产生 ...

  5. Spring Boot2解决idea console 控制台输出乱码

    Idea默认配置是采用GBK, 而项目工程文件采用的是UTF-8. 编码不一致,导致idea Console控制台输出乱码. 网上的解决方案,大都是直接修改Settings=>Editor=&g ...

  6. mysql常用运行原理

    MySQL的客户端/服务器架构 MySQL的服务器程序直接和我们存储的数据打交道,然后可以有好多客户端程序连接到这个服务器程序,发送增删改查的请求,然后服务器就响应这些请求,从而操作它维护的数据.和微 ...

  7. JavaWeb入门——Tomcat的目录结构

    JavaWeb入门——Tomcat的目录结构 摘要:本文主要了解了Tomcat的目录结构. 目录结构 打开Tomcat的目录,可以看到如下文件和文件夹: bin目录 该目录下存放的是二进制可执行文件. ...

  8. spring的事物管理配置

    基于注解的事务管理器配置(AOP) 首先要引入AOP和TX的名称控件 <!-- 使用annotation定义事务 --> <tx:annotation-driven transact ...

  9. jquery 实现只能选中一个checkbox,选中当前的去除上一个

    jq 实现只能选中一个checkbox,选中当前的去除上一个. <div id="checkboxed"> <input name="check1&qu ...

  10. GNN 相关资料记录;GCN 与 graph embedding 相关调研

    最近做了一些和gnn相关的工作,经常听到GCN 和 embedding 相关技术,感觉很是困惑,所以写下此博客,对相关知识进行索引和记录: 参考链接: https://www.toutiao.com/ ...