JavaScript 事件


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

当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。

1.HTML 事件

HTML 事件可以是浏览器行为,也可以是用户行为。

以下是 HTML 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。

实例:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Yubaba</title>
</head>
<body> <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p> </body>
</html>

运行结果:

以上实例中,JavaScript 代码将修改 id="demo" 元素的内容。

在下一个实例中,代码将修改自身元素的内容 (使用 this.innerHTML):

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body> <button onclick="this.innerHTML=Date()">现在的时间是?</button> </body>
</html>

点击后,原先的按钮的值被js给改变。

2.常见的HTML事件

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

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

更多的事件可以去查阅HTML DOM 事件

3.JavaScript 可以做什么?

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

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

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

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

11JavaScript事件的更多相关文章

  1. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  2. Jquery的点击事件,三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  4. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  5. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  6. 移动端IOS点击事件失效解决方案

    解决方案 解决办法有 4 种可供选择: 1 将 click 事件直接绑定到目标元素(即 .target)上 2 将目标元素换成 <a> 或者 button 等可点击的元素 3 将 clic ...

  7. Android笔记——Button点击事件几种写法

    Button点击事件:大概可以分为以下几种: 匿名内部类 定义内部类,实现OnClickListener接口 定义的构造方法 用Activity实现OnClickListener接口 指定Button ...

  8. HTML 事件(一) 事件的介绍

    本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...

  9. HTML 事件(二) 事件的注册与注销

    本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...

随机推荐

  1. Unity3D-NGUI动态加载图片

    NGUI提供了很方便的UIAtlas,其主要作用是改进DrawCall,把众多图片整合在一张贴图上,由于UNITY3D简单易用的好处,所以只是用原生的GUI很容易忽视DrawCall的问题,所以NGU ...

  2. python装饰器 高阶函数 函数闭包

    1.装饰器: 本质是函数,功能是为其他函数添加附加功能 原则:1.不修改被装饰函数的源代码 2.不修改被修饰函数的调用方式 装饰器=高阶函数+函数嵌套+闭包 #装饰器格式框架def wrap(func ...

  3. 使用 Azure CLI 在 Azure China Cloud 云平台上手动部署一套 Cloud Foundry

    这篇文章将介绍如何使用 Azure CLI 在 Azure China Cloud 云平台上手动部署一套 Cloud Foundry.本文的目的在于: 了解作为 PaaS 的 Cloud Foundr ...

  4. Sql Server增加Sequence序列语句

    1.创建序列 下面的示例创建名为 DecSeq 使用一个序列 十进制 具有介于 0 到 255 之间的数据类型.序列以 125 开始,每次生成数字时递增 25. 因为该序列配置为可循环,所以,当值超过 ...

  5. Java学习---Map的学习

    1. Map 1.1. map中的方法 1.2. Map.Entry 对于集合来讲,就是把kye-value的数据保存在了Map.Entry的实例之后,再在Map集合中插入了一个Map.Entry的实 ...

  6. 沉淀再出发:再谈java的多线程机制

    沉淀再出发:再谈java的多线程机制 一.前言 自从我们学习了操作系统之后,对于其中的线程和进程就有了非常深刻的理解,但是,我们可能在C,C++语言之中尝试过这些机制,并且做过相应的实验,但是对于ja ...

  7. MapReduce Design Patterns(chapter 2 (part 2))(三)

    Median and standard deviation 中值和标准差的计算比前面的例子复杂一点.因为这种运算是非关联的,它们不是那么容易的能从combiner中获益.中值是将数据集一分为两等份的数 ...

  8. ubuntu 13.10 无法播放 mp3

    添加源: #deb cdrom:[Ubuntu 13.10 _Saucy Salamander_ - Release i386 (20131016.1)]/ saucy main restricted ...

  9. phonegap 启动背景设置

    1.拷贝一张图片到Android项目的res目录的drawable-mdpi目录下 2.在主要的src下的java文件中编写代码 package com.study.hellomobileword1; ...

  10. Html5 移动应用软件开发框架 JqueryMobile SenchaTouch 介绍

    一.JqueryMobile 介绍 jQuery Mobile 是 jQuery 在手机上和平板设备上的版本. jQuery Mobile 不仅会给主流移动平台带来 jQuery 核心库,而且会发布一 ...