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的节点,绑定了事件:点击会打出来里头的 ...
随机推荐
- react项目中使用plop
第一步,安装依赖 npm install plop --dev //或者用yarn yarn add plop --dev 第二步,在package同级目录下新建plopfile.js 这是plop的 ...
- 2023-07-23：给你 n 个任务和 m 个工人 每个任务需要一定的力量值才能完成 需要的力量值保存在下标从 0 开始的整数数组 tasks 中 第 i 个任务需要 tasks[i] 的力量才能完
2023-07-23:给你 n 个任务和 m 个工人 每个任务需要一定的力量值才能完成 需要的力量值保存在下标从 0 开始的整数数组 tasks 中 第 i 个任务需要 tasks[i] 的力量才能完 ...
- LeetCode 周赛上分之旅 #35 两题坐牢，菜鸡现出原形
️ 本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 和 [BaguTree Pro] 知识星球提问. 学习数据结构与算法的关键在于掌握问题背后的算法思维框架,你的思 ...
- 数据库是要拿来用的，不是用来PK先进性的
周五参加了WAIC后又和一家上海本地的数据库厂商交流了一下午.等我要买高铁票回南京的时候已经买不到票了.好不容易刷到一张到苏州北的高铁票,我就上了车.上车后突然想起还不如就回苏州老家住一晚算了.到家后 ...
- 宝塔linux网站搬家思路
对于一个网站来说,其实就分为两个部分,一个是网站的源码,另一个就是网站的数据库. 那么对于网站搬家而言,要考虑的也就是两点,一是要打包网站的源码,再者就是要打包网站的数据库.其次就是要在新的站点,配置 ...
- [刺客伍六七&黑客] 魔刀千刃
魔刀千刃的特写 诞生之日:2023.7.29 此后会在此记录如何自己写一个自己的python库以及魔刀千刃的维护过程. 魔刀千刃(evilblade) **只攻不防,天下无双** 实战 (和堆攻击帖子 ...
- 开机自动打开termux以及启动termux的服务
ps:因为我们的服务是安装在平板上面的termux,客户不想维护麻烦,如果平板重启之后还需要手动启动ternux,还要开启命令启动服务,这样比较麻烦,所以研究如下操作 1.安装macroDroid 直 ...
- 文心一言 VS 讯飞星火 VS chatgpt （82）-- 算法导论8.1 1题
一.如果用go语言,在一棵比较排序算法的决策树中,一个叶结点可能的最小深度是多少? 文心一言: 在一个排序决策树(如二叉搜索树)中,每个叶节点的最小深度等于输入数据中最大元素与最小元素之间的位距离.这 ...
- Pytest 框架执行用例流程浅谈
背景: 根据以下简单的代码示例,我们将从源码的角度分析其中的关键加载执行步骤,对pytest整体流程架构有个初步学习. 代码示例: import pytest def test_add(): asse ...
- 小红书获得小红书笔记详情 API 返回值说明
item_get_video-获得小红书笔记详情 注册开通 smallredbook.item_get_video 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以 ...