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. PyTorch-网络的创建,预训练模型的加载

    本文是PyTorch使用过程中的的一些总结,有以下内容: 构建网络模型的方法 网络层的遍历 各层参数的遍历 模型的保存与加载 从预训练模型为网络参数赋值 主要涉及到以下函数的使用 add_module ...

  2. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  3. Winform中使用Timer实现滚动字幕效果(附代码下载)

    场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建一个Fo ...

  4. .Net配置Ajax跨域访问

    1.在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customHeaders> <add nam ...

  5. 开源资产管理系统Snipe-IT

    CentOS7安装IT资产管理系统Snipe-IT介绍资产管理工具Github:https://github.com/snipe/snipe-it官网:https://snipeitapp.com/D ...

  6. 利用ExecuteMultipleRequest来批量导入数据,成功的成功失败的失败,并生成导入结果文件

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  7. HA Joker Vulnhub Walkthrough

    下载地址: https://www.vulnhub.com/entry/ha-joker,379/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.132Starti ...

  8. Android: Unable to resolve dependency for ':app@debugUnitTest/compileClasspath':

    我按照ExoPlayer的github指引添加 implementation 'com.google.android.exoplayer:exoplayer:2.X.X' 发现根本run不起来,并报错 ...

  9. HUE Oozie : error=2, No such file or directory采坑记录

    HUE Oozie : error=2, No such file or directory采坑记录 1.错误详情 一直都是同一种方式在hue上定义workflow,不知为啥 今天定义的就是不行... ...

  10. 关于js的一些被忽视但也很重要的知识点

    以为懂了,实际没懂.对新知识保持好奇心很有必要,但对原有知识也要更深入了解其细节.温故知新,"新",应该是自己不懂的,亦或是遗忘了的,亦或是...... 问题1: Object.p ...