【你也能从零基础学会网站开发】Web建站之javascript入门篇 JavaScript事件处理

🚀 个人主页 极客小俊
✍🏻 作者简介:程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步!
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

什么是DHTML

DHTML: Dynamic HTML 动态的HTML, 这门技术并不是一门新的技术, 而是将我们之前所学的HTML、CSS、JavaScript整合在一起,利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为. 比如说: 我们使用点击div改变div的宽高及背景颜色

简单的说DHTML的定义就是使用JavaScript和CSS级联样式表操作HTML创造出各种动态视觉效果统称为DHTML, DHTML是一种浏览器端的动态网页技术

DHTML的功能
动态改变字体大小和字体颜色
动态设定文档元素的位置、内容,甚至隐藏和显示元素
可以通过事件响应机制制作动态折叠的树形结构和菜单
可以通过定时器制作时钟、日历
可以弹出对话框与用户进行交互
可以通过表单提交用户填写的信息
通过动态样式表可以设定更多的显示效果

DHTML对象模型(DOM)
将HTML标记、属性和CSS样式都对象化
可以动态存取HTML文档中的所有元素
可以使用属性name或id来存取或标记对象
改变元素内容或样式后浏览器中显示效果即时更新
DHTML对象模型包括浏览器对象模型和Document对象模型

DHTML对象模型

如图


看不懂也没关系,先熟悉一下大致结构!

对象事件概念

DHTML对象在状态改变、操作鼠标或键盘时触发的动作
对象事件的分类:
鼠标事件:针对鼠标单击、双击、移动等动作
键盘事件:针对按下键盘产生的动作
状态改变事件:在载入文档、退出、获取焦点、失去焦点、提交、变化等动作时产生的事件!

对象事件处理

常见的事件对象分类如下图:

举个栗子

定义进入、退出文档和单击按钮事件!

<!--在属性定义中直接处理对象事件-->
<body onload="alert('hello body')" onunload="alert('goodbye')">
<input type="button"  value="单击" onclick="alert('hello button')">
</body>

如图

冒泡事件处理机制

我们先来看一个图:


也就是说当处于DHTML对象模型底部对象事件发生时会依次激活上面对象定义的同类事件处理!

这就是事件冒泡机制!

表单验证事件处理

我们来看一个最基本的表单验证案例,结合事件处理机制!

代码

<script language="JavaScript">function check(){ //检查t1输入是否为空if (form1.t1.value!=""){form1.submit();}else{form1.t1.focus();} //如果t1值为空则自动将焦点设定到t1输入框}
</script>
<form name="form1">姓名:<input type="text" name="t1" value=""><input type="button" name="b1" onclick="check()" value="提交">
</form>

去试试看效果吧!

动态样式事件处理

动态样式表指的是在JavaScript中直接对对象的style属性进行设定,HTML组件中的style属性将立即起作用!

<div style="font-size:36pt;font-family:黑体"onmouseover="this.style.color='#FF0000';"onmouseout="this.style.color='#000000';" >
鼠标移过来,马上变颜色
</div> 

我们来看看效果!

以上就是事件处理相关最简单的概念, 大家先熟悉一下!

Event事件对象

事件触发后将会隐含的产生一个Event对象,Event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息!

Event事件对象主要的属性

clientX、clientY

事件触发时鼠标光标相对浏览器窗口的坐标

screenX、screenY

事件触发时相对客户端屏幕的位置坐标

offsetX、offsetY

事件触发时相对引发事件标记对象的位置

其他事件对象属性:

srcElement 触发该事件的标记对象
button 鼠标按下的键(1左键、2右键、4中键)
这个属性仅用于onmousedown, onmouseup, 和 onmousemove 事件。对其他事件,不管鼠标状态如何,都返回 0(比如onclick)
keyCode 键盘按键的Unicode码
altKey/ctrlKey/shiftKey 键盘的alt、ctrl、shift键是否按下
以下专门针对onmouseover和onmouseout事件:
fromElement 鼠标原来所处标记对象
toElement 鼠标现在所处标记对象

事件驱动与事件处理

发生~处理” 模式

Web页中存在很多发生 ~ 处理这样的关系

比如: 一个文本框突然没有了焦点或字符数量改变了,当发些事件时系统就调用监听这些事件的函数。

整个系统可以使用事件的发生来驱动运作,这就是所谓的事件驱动。

比如: 响应编辑框的onkeyup事件,当用户按回车键时将文本框中的内容显示在对话框中 !

代码如下

<script>// 释放按键事件处理程序function OnKeyUp(_e) {// 获取有效的事件对象var e = _e ? _e : window.event;// 按下的是否是回车键if (event.keyCode == 13) {// 将文本框中的内容显示在消息框中document.write("您输入的内容是:" + Text1.value);}}</script><!--标题-->
<h1>事件处理示例</h1><br />
<!--通过文本框中的onkeyup属性绑定释放按键事件处理程序-->
<input id="Text1" type="text" onkeyup="OnKeyUp()" style="width: 423px; height: 178px" />

大家可以去试试这个案例是什么效果, 就会明白什么是事件了!

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739346.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础命令[16]-head

文章目录 1. head 命令说明2. head 命令语法3. head 命令示例3.1 不加参数3.2 -c&#xff08;按照字节显示&#xff09;3.3 -n&#xff08;按照行数显示&#xff09;3.4 -v&#xff08;显示文件名&#xff09; 4. 总结 1. head 命令说明 head&#xff1a;用来显示文件开头&…

Linux认识与学习BASH

Linux认识与学习BASH 认识BASH这个Shellshell是什么系统的合法shell与/etc/shells功能Bash Shell的功能查询命令是否为Bash shell 的内置命令(type)命令的执行与快速编辑按钮 shell的变量功能什么是变量&#xff1f;变量的使用与设置&#xff1a;echo、变量设置规则、unset环境…

springboot网页时装购物系统链接

链接:https://pan.baidu.com/s/1mCmCSbqUCv48_a6wiLBdJg?pwdfalz 提取码:falz 2600套项目源码 https://kdocs.cn/l/cuAdxEBfLiqA 工作室精心制作&#xff0c;包括小程序项目&#xff0c;springboot项目&#xff0c;传统ssm项目&#xff0c;前后端分离项目。你可以用来制作自…

Stable Diffusion 模型下载:Comic Babes(漫画宝贝)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 条目内容类型大模型基础模型SD 1.5来源CIVITAI作者datmuttdoe文件名称comicBabes_v2.safet…

如何用 RAG 技术玩转文档问答?Milvus × 网易有道 QAnything 为你揭秘!

过去一年&#xff0c;RAG 在技术层面发展迅速&#xff0c;为向量数据库赛道添了一把火。RAG 和向量数据库的结合&#xff0c;能够有效解决幻觉、时效性差、专业领域知识不足等阻碍大模型应用的核心问题。 不久前&#xff0c;网易有道开源了自研的 RAG 引擎 QAnything。用户的任…

Q学习(Q-Learning)

Q学习是一种强化学习算法&#xff0c;用于指导代理&#xff08;Agent&#xff09;在给定环境中如何采取最优行动。它通过学习状态中的行动价值来实现&#xff0c;属于从与环境的交互中学习&#xff0c;通过尝试和错误&#xff0c;以实现目标的机器学习算法。 下面是Q学习工作原…

突破次元壁!体验数字人的神秘世界

在这个繁忙的城市&#xff0c;人们的生活总是充满了压力和焦虑。他们似乎总是在追寻着什么&#xff0c;却又不知道自己究竟在追寻什么。在这个看似平凡的世界里&#xff0c;隐藏着一个神秘的数字人世界。 这个数字人世界并不是虚构的&#xff0c;而是我们无法触及的另一个维度…

CUDA入门之统一内存

原文来自CUDA 编程入门之统一内存 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;高性能&#xff08;HPC&#xff09;开发基础教程 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质…

vite配置

"vite": "^5.1.4" resolve.alias&#xff1a;配置别名 1、执行npm install -D types/node 或者 yarn add types/node -D 2、以下配置代表访问src时可以用“”代替 resolve: {alias: {"": path.resolve(__dirname, "./src"),},}, 使…

【C语言】自定义类型:结构体

1. 结构体类型的声明 1.1 结构体回顾 结构是⼀些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。 1.1.1 结构的声明 struct tag {member-list; }variable-list; 例如描述⼀个学⽣&#xff1a; struct Stu {char name[20];//名字int age;//年…

Vue前端项目安装及相关问题解决

目录 安装 以人人开源前端项目安装为例&#xff0c;安装部署及安装过程中的问题的解决思路。开源地址如下&#xff1a; 人人开源 下载代码到本地 安装visial studio code&#xff08;即VSCode&#xff09;作为前端开发工具&#xff0c;使用前端前必须安装node.js作为让js运行…

Android 生成SO - 基础工程创建

最近需要给小伙伴扫盲一下如何使用Android Studio 生成一个SO文件&#xff0c;网上找了很多都没有合适的样例&#xff0c;那只能自己来写一个了。 原先生成SO是一个很麻烦的事情&#xff0c;现在Android Studio帮忙做了很多的事情&#xff0c;基本只要管好自己的C代码即可。 …

【梳理】k8s使用Operator搭建Flink集群(高可用可选)

文章目录 1. 架构图2. helm 安装operator3. 集群知识k8s上的两种模式&#xff1a;Native和Standalone两种CR 4. 运行集群实例Demo1&#xff1a;Application 集群Demo2&#xff1a;Session集群优劣 5. 高可用部署问题1&#xff1a;High availability should be enabled when sta…

3.1_2 覆盖与交换

3.1_2 覆盖与交换 &#xff08;一&#xff09;覆盖技术 早期的计算机内存很小&#xff0c;比如IBM 推出的第一台PC机最大只支持1MB大小的内存。因此经常会出现内存大小不够的情况。 后来人们引入了覆盖技术&#xff0c;用来解决“程序大小超过物理内存总和”的问题。 覆盖技术的…

DevOps-Jenkins-CI持续集成操作

创建项目 创建个web项目 我这里直接用Spring Web自动生成的demos 启动项目&#xff0c;访问展示如下默认页面信息 项目新增Docker构建配置 在项目下新建docker目录&#xff0c;新增Dockerfile、docker-compose.yml文件 Dockerfile文件&#xff0c;将mytest.jar 复制到容器的…

移动硬盘无法读取怎么修复?分享三个简单方法

移动硬盘作为现代数据存储的重要工具&#xff0c;一旦出现故障&#xff0c;往往会让我们感到焦虑和困惑。当移动硬盘无法读取时&#xff0c;我们需要冷静分析并采取适当的措施来修复它。本文将为您介绍三种有效的修复方法。 一、检查物理连接与驱动程序 当移动硬盘无法读取时&…

LiveGBS流媒体服务器中海康摄像头GB28181公网语音对讲、语音喊话的配置

LiveGBS海康摄像头国标语音对讲大华摄像头国标语音对讲GB28181语音对讲需要的设备及服务准备 1、背景2、准备2.1、服务端必备条件&#xff08;注意&#xff09;2.2、准备语音对讲设备2.2.1、不支持跨网对讲示例2.2.2、 支持跨网对讲示例 3、开启音频开始对讲4、搭建GB28181视频…

动手学深度学习-注意力机制Transformer

注意力机制 1. 注意力提示 1.1. 生物学中的注意力提示 **自主性提示&#xff08;随意线索&#xff09;&#xff1a;收到认知和意识的控制&#xff0c;有主观意愿的推动。**如下图&#xff0c;所有纸制品都是黑白印刷的&#xff0c;但咖啡杯是红色的。 换句话说&#xff0c;这…

【办公类-21-09】三级育婴师 视频转文字docx(等线小五单倍行距),批量改成“宋体小四、1.5倍行距、蓝色字体”

作品展示&#xff1a; 背景需求&#xff1a; 一、视频处理 1、育婴师培训的现场视频 2、下载视频&#xff0c;将视频换成考题名称 二、音频 视频用格式工厂转成MP3音频 3、转文字doc 把音频放入“网易云见外工作台”转换为“文字" 等待5分钟&#xff0c;音频文字会被写…

Python元组(Tuple)深度解析!

目录 1. 什么是元组&#xff1f; 2. 创建元组 3.访问元组 4.元组的运算 5.修改元组不可行 6.元组的应用场景 前面的博客里&#xff0c;我们详细介绍了列表&#xff08;List&#xff09;这一种数据类型&#xff0c;现在我们来讲讲与列表相似的一种数据类型&#xff0c;元组…