JavaScript事件

1、<button id="btn1" onclick="document.getElementById("btn1").innerText=Date();">现在的时间是?</button>

2、<button onclick="this.innerHTML=Date()">现在的时间是?</button>

3、<button id="btn1" onclick="display_type()">现在的时间是?</button>

<script>

function display_type(){

document.getElementById("btn1").innerText=Date();

}

</script>

JavaScript常见的HTML事件

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

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

JavaScript作用域

事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性
  • 等等 ...

可以使用多种方法来执行 JavaScript 事件代码:

  • HTML 事件属性可以直接执行 JavaScript 代码
  • HTML 事件属性可以调用 JavaScript 函数
  • 你可以为 HTML 元素指定自己的事件处理程序
  • 你可以阻止事件的发生。
  • 等等 ...

JavaScript日常学习4的更多相关文章

  1. JavaScript日常学习2

    JavaScript 数据类型    字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义(Undefined). e ...

  2. JavaScript日常学习3

    JavaScript函数  函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname()     {执行代码} function myFunct ...

  3. JavaScript日常学习1

    您会经常看到 document.getElementById("id"). 这个方法是 HTML DOM 中定义的. DOM (Document Object Model)(文档对 ...

  4. JavaScript日常学习6

    JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continue).标签 JavaScript的运算符.比较符.条件语句.循环语句.跳出循环(break.continu ...

  5. JavaScript日常学习5

    JavaScript字符串属性和方法 eg :var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";      var sln = txt.length; ...

  6. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  7. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. 正则表达式(javascript)学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  9. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

随机推荐

  1. c++ 简单的动态银河星空绘制(类应用)

    话不多说直接贴代码: #include <graphics.h> #include <time.h> #include <conio.h> #define MAXS ...

  2. 009(1)-saltstack之salt-ssh的使用及配置管理LAMP状态的实现

    1 salt-ssh的使用 1. 安装salt-ssh[root@slave1 .ssh]# yum install -y salt-ssh 2. 配置salt-ssh # Sample salt-s ...

  3. touch cyusbConfig.cmake

    touch cyusbConfig.cmake cmake文件丢失,与其解决问题,不如临时建立一个临时文件

  4. shoeBox超实用的雪碧图(Sprite)图制作工具-使用

    从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...

  5. 高性能mysql 第1章 mysql架构与历史

    mysql逻辑架构图: 第一层 客户端 第二层(服务层):针对所有类型的存储引擎可以公共提取的部分.将存储引擎抽离之后的其他部分都在这里.如:查询解析,分析优化,内置函数,存储过程,触发器,视图. 第 ...

  6. iview 在Table组件中使用switch组件并自定义内容和增加自定义事件

    注意: 使用render函数. 效果: 添加自定义文字: 1. 2. 上面的两种方法效果都是一样的: 增加自定义事件: 结果: 自信是进步的源泉. 继续加油. ^_^

  7. 手动升级 Confluence 6 - 升级 Confluence

    4. 备份 备份你的数据库,并且确定的你的数据库备份已经被正确的创建了.如果你的数据库不支持在线备份的话,你需要首先停止 Confluence 的运行. 备份你的 Confluence 安装目录(in ...

  8. python3.6+Xadmin2.0系列(一) xadmin下载及安装

    环境配置:win7+python3.6+Django2.1+xadmin2+PyCharm 一.Xadmin下载及安装: 1.下载: 下载地址:https://github.com/sshwsfc/x ...

  9. 二分mid的取法

    二分的两种形式: 1.范围缩小时,r = mid,l = mid + 1,取中间值时,mid = (l + r) >> 1. 2.范围缩小时,l = mid,r = mid - 1,取中间 ...

  10. 微信小程序_(map)简单的小地图

    map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...