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的节点,绑定了事件:点击会打出来里头的 ...
随机推荐
- 【overcome error】dereferencing pointer to incomplete type
@ 目录 前言 解决 代码情况 分析问题 尾声 前言 这个问题是我在学习数据结构链栈部分遇到的,英文报错如题所示,中文意思是:取消引用不完整类型的指针,在百度一圈也没明白,(百度搜索,看一个和全看基本 ...
- 解决：ValueError: Cannot mask with non-boolean array containing NA / NaN values
错误原因:这里就是说,分组这一列里面,包含了非字符串的内容,比如数字.因为 .str.contains 的使用就要求这个字段必须是字符串,不能掺杂数字的. 解决方案: # 包含对应关系的所有行 dat ...
- FJOI2022 游记
2022.3.28 省选延期,延到了4.16 2022.4.11 省选又延期,延到了5.2 FJOI 要回来了!! Day -7 开始停课了 QwQ Day -6 打摆 Day -5 打摆 不行,我不 ...
- golang trace view 视图详解
大家好,我是蓝胖子,在golang中可以使用go pprof的工具对golang程序进行性能分析,其中通过go trace 命令生成的trace view视图对于我们分析系统延迟十分有帮助,鉴于当前对 ...
- H5用canvas放烟花
很久很久以前的一个很流行的java Applet放烟花效果,当初移到android过,这次摸鱼时间翻译成js代码,用canvas实现这么多年,终于能大致看懂这代码了, 已经实现透明效果,只需要给bod ...
- Linux虚拟机报错Job for network.service failed because the control process exited with error codeLinux虚拟机报错的解决方法
发布于 2 天前 3 次阅读 Linux虚拟机设置静态ip后,突然发现联网连不上了,ssh也无法使用,重启network后仍旧无法使用.按照网络上的方法发现没有效果后,右键如下位置将nat模式转换为 ...
- 【升职加薪秘籍】我在服务监控方面的实践(6)-业务维度的mysql监控
大家好,我是蓝胖子,关于性能分析的视频和文章我也大大小小出了有一二十篇了,算是已经有了一个系列,之前的代码已经上传到github.com/HobbyBear/performance-analyze,接 ...
- 蚂蚁集团混沌工程 ChaosMeta V0.5 版本发布
混沌工程 ChaosMeta 的全新版本 V0.5 现已正式发布!该版本包含了许多新特性和增强功能,为用户提供了支撑混沌工程各个阶段的平台能力,以及降低使用门槛的用户界面. ChaosMeta V0. ...
- 一文解锁vue3中hooks的使用姿势
vue3 中的 hooks 是什么? 简单来说如果你的函数中用到了诸如 ref,reactive,onMounted 等 vue 提供的 api 的话,那么它就是一个 hooks 函数,如果没用到它就 ...
- DevOps ｜研发效能之环境、程序、配置、SQL变更管理
本文主要是讲如何建立有效的环境.程序.配置.SQL变更和管理平台. 几天前和一个朋友聊到环境.程序的配置变更,SQL变更和整个上线流程.之前我们在这块也做了很多,有做的好的也有做的一般的,借机都总结 ...