HTML DOM之二：事件
对事件作出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
在本例中，当用户点击时，会改变 <h1> 元素的内容：
1、
例子1：
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1>
6
7 </body>
8 </html>
例子1改进：用函数
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 function changetext(id)
6 {
7 id.innerHTML="hello!";
8 }
9 </script>
10 </head>
11 <body>
12
13 <h1 onclick="changetext(this)">请点击这段文本！</h1>
14
15 </body>
16 </html>
2、 button 元素分配 onclick 事件：
例子2：
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
6
7 <button onclick="displayDate()">试一试</button>
8
9 <script>
10 function displayDate()
11 {
12 document.getElementById("demo").innerHTML=Date();
13 }
14 </script>
15
16 <p id="demo"></p>
17
18 </body>
19 </html>
例子2：//
名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时，将执行函数。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 </head>
5 <body>
6
7 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
8
9 <button id="myBtn">试一试</button>
10
11 <script>
12 document.getElementById("myBtn").onclick=function(){displayDate()};
13 function displayDate()
14 {
15 document.getElementById("demo").innerHTML=Date();
16 }
17 </script>
18
19 <p id="demo"></p>
20
21 </body>
22 </html>
3、onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
1 <!DOCTYPE html>
2 <html>
3 <body onload="checkCookies()">
4
5 <script>
6 function checkCookies()
7 {
8 if (navigator.cookieEnabled==true)
9 {
10 alert("Cookies are enabled")
11 }
12 else
13 {
14 alert("Cookies are not enabled")
15 }
16 }
17 </script>
18
19 <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
20 </body>
21 </html>
4、onchange 事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 function myFunction()
6 {
7 var x=document.getElementById("fname");
8 x.value=x.value.toUpperCase();
9 }
10 </script>
11 </head>
12 <body>
13
14 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
15 <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
16
17 </body>
18 </html>
5、onmouseover 和 onmouseout 事件
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <div
6 onmouseover="mOver(this)"
7 onmouseout="mOut(this)"
8 style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
9 Mouse Over Me
10 </div>
11
12 <script>
13 function mOver(obj)
14 {
15 obj.innerHTML="谢谢你"
16 }
17
18 function mOut(obj)
19 {
20 obj.innerHTML="把鼠标指针移动到上面"
21 }
22 </script>
23
24 </body>
25 </html>
6、onmousedown、onmouseup 以及 onclick 事件
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <div
6 onmousedown="mDown(this)"
7 onmouseup="mUp(this)"
8 style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
9 点击这里
10 </div>
11
12 <script>
13 function mDown(obj)
14 {
15 obj.style.backgroundColor="#1ec5e5";
16 obj.innerHTML="松开鼠标"
17 }
18
19 function mUp(obj)
20 {
21 obj.style.backgroundColor="#D94A38";
22 obj.innerHTML="谢谢你"
23 }
24 </script>
25
26 </body>
27 </html>
HTML DOM之二：事件的更多相关文章
- 一步一步带你实现virtual dom（二) -- Props和事件
很高兴我们可以继续分享编写虚拟DOM的知识.这次我们要讲解的是产品级的内容,其中包括:设置和DOM一致性.以及事件的处理. 使用Babel 在继续之前,我们需要弥补前一篇文章中没有详细讲解的内容.假设 ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 前端之JavaScript：JS之DOM对象二
继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...
- JavaScript的基础语法及DOM元素和事件
一,JavaScript是什么? 1,JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行.主要用来实现网页的动态效果,用户交互及前后端的数据传输等. 2,J ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
随机推荐
- c语言分析和循坏对应的汇编定义格式（Debug版本）
c语言if单分支结构所对应的汇编代码结构 #include "stdafx.h" int main(int argc, char* argv[]) { if(argc > 8 ...
- quarkus依赖注入之二：bean的作用域
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于bean的作用域(scope) 官方资料:http ...
- 开源.NetCore通用工具库Xmtool使用连载 - HTTP请求篇
[Github源码] <上一篇> 介绍了Xmtool工具库中的XML操作类库,今天我们继续为大家介绍其中的HTTP请求类库. 在现如今的软件需求场景中,HTTP网络请求几乎是开发过程中必然 ...
- Luckysheet：一个纯前端的excel在线表格
最近因为项目要求,需要在页面上添加一个在线编辑excel的功能,因此只能在网上找有没有直接用的插件,最后很幸运的是幸好找到了一个 ----luckysheet. 这个是从luckysheet官网上找的 ...
- WPF的前世今生
1.WPF的布局 WPF的布局分为相对定位和绝对定位两种. 绝对定位一般用Canvas 相对定位一般用Grid.StackPanel.DockPanel.WrapPanel 2.MVVM模式是什么 M ...
- 论文解读（BSFDA）《Black-box Source-free Domain Adaptation via Two-stage Knowledge Distillation》
Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:Black-box Source-free Domain Adaptation via Two-stage ...
- Java Maven POM配置参考
介绍 什么是POM? POM代表"项目对象模型".它是一个名为pom.XML的文件中保存的Maven项目的XML表示. 快速概览 这是一个直接位于POM项目元素下的元素列表.请注意 ...
- 谁家面试往死里问 Swagger 啊？
大家好,我是小富- 前言 说个挺奇葩的事,有个老铁给我发私信吐槽了一下它的面试经历,他去了个国企单位面试,然后面试官跟他就Swagger的问题聊了半个多小时.额- 面试嘛这些都不稀奇,总能遇到是千奇百 ...
- 干掉 CRUD！这个API开发神器效率爆炸，无需定义MVC类！！
简介 magic-api 能够只通过 UI 界面就能完成简单常用的接口开发,能够支持市面上多数的关系性数据库,甚至还支持非关系性数据库 MongoDB. 通过 magic-api 提供的 UI 界面完 ...
- 10分钟理解契约测试及如何在C#中实现
在软件开发中,确保微服务和API的可靠性和稳定性非常重要. 随着应用程序变得越来越复杂,对强大的测试策略的需求也越来越大,这些策略可以帮助团队在不牺牲敏捷性的情况下交付高质量的代码. 近年来获得广泛关 ...