8.事件对象

news/2024/7/14 21:02:53

8.1获取事件对象

●事件对象是什么
也是个对象,这个对象里有事件触发时的相关信息
例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
●使用场景
可以判断用户按下哪个键,比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素,从而做相应的操作
●语法:如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
在这里插入图片描述

8.2获取事件对象

●部分常用属性
➢type
获取当前的事件类型
➢ clientX / clientY
获取光标相对于浏览器可见窗口左上角的位置
➢ offsetX / offsetY
获取光标相对于当前DOM元素左上角的位置
➢key
用户按下的键盘键的值
现在不提倡使用keyCode

【示例】

<body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('keyup', function (e) {if (e.key === 'Enter') {console.log('我按下了回车')}})</script>
</body>

案例-按下回车发布评论
需求:按下回车键盘,可以发布信息
分析:
①用户按下键盘事件keydown或者keyup都可以
②如果用户按下的是回车键盘,则发布信息
③让留言信息模块显示,把拿到的数据渲染到对应标签内部
【示例代码】

<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">Kai</p><p class="text">大家都辛苦啦,感谢各位大大的努力,能圆满完成真是太好了[笑哭][支持]</p><p class="time">2023-07-30 10:41:21</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')//1.当文本域获得了焦点,就让 total 显示出来tx.addEventListener('focus', function () {total.style.opacity = 1})//2.当文本域失去焦点,就让 total 隐藏起来tx.addEventListener('blur', function () {total.style.opacity = 0})// 3.用户输入tx.addEventListener('input', function () {total.innerHTML = `${tx.value.length}/200字`})// 4.按下回车发布评论const item = document.querySelector('.item')const text = document.querySelector('.text')tx.addEventListener('keyup', function (e) {if (e.key === 'Enter') {if (tx.value.trim()) { //trim() 去除左右空格//显示评论item.style.display = 'block'text.innerHTML = tx.value}//按下回车 清空文本框和字数tx.value = ''total.innerHTML = '0/200字'}})</script>
</body></html>

在这里插入图片描述

8.3 trim()方法

作用:去除左右空格
【示例】

<script>const str = '       blue or pink        'console.log(str.trim())
</script>

在这里插入图片描述


http://www.mrgr.cn/p/58870086

相关文章

python与深度学习(八):CNN和fashion_mnist二

目录 1. 说明2. fashion_mnist的CNN模型测试2.1 导入相关库2.2 加载数据和模型2.3 设置保存图片的路径2.4 加载图片2.5 图片预处理2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章训练的模型进行测…

springboot整合myabtis+mysql

一、pom.xml <!--mysql驱动包--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><!--springboot与JDBC整合包--><dependency><groupId>org.springframework.b…

第十章:重新审视扩张卷积:一种用于弱监督和半监督语义分割的简单方法

0.摘要 尽管取得了显著的进展&#xff0c;弱监督分割方法仍然不如完全监督方法。我们观察到性能差距主要来自于它们在从图像级别监督中学习生成高质量的密集目标定位图的能力有限。为了缓解这样的差距&#xff0c;我们重新审视了扩张卷积[1]并揭示了它如何以一种新颖的方式被用…

开源视频监控管理平台国标GB28181视频EasyCVR电子地图功能展示优化

视频汇聚平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频监控综合管理平台EasyCVR可提供的视频能力包括&#…

ssh安全远程管理

目录 1、什么是ssh 2、ssh登陆 3、ssh文件传输 1、什么是ssh ssh是 Secure Shell 的缩写&#xff0c;是一个建立在应用层上的安全远程管理协议。ssh 是目前较为可靠的传输协议&#xff0c;专为远程登录会话和其他网络服务提供安全性。利用ssh 协议可以有效防止远程管理过程中…

macos下安装john the ripper并配置zip2john+破解加密zip文件

为了破解加密的zip文件&#xff0c;需要用到john进行爆破密码。 1、首先使用homebrew安装john&#xff0c;可以安装它的增强版john-jumbo: brew install john-jumbo 2、安装后可以使用 john 命令验证&#xff1a; john 3、配置zip2john的环境——.zshrc下&#xff0c;&#x…

[php-cos]ThinkPHP项目集成腾讯云储存对象COS

Cos技术文档 1、安装phpSdk 通过composer的方式安装。 1.1 在composer.json中添加 qcloud/cos-sdk-v5: >2.0 "require": {"php": ">7.2.5","topthink/framework": "^6.1.0","topthink/think-orm": "…

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(17)-Fiddler如何充当第三者再识AutoResponder标签-下

1.简介 上一篇宏哥主要讲解的一些在电脑端的操作和应用&#xff0c;今天宏哥讲解和分享一下&#xff0c;在移动端的操作和应用。其实移动端和PC端都是一样的操作&#xff0c;按照宏哥前边抓取移动端包设置好&#xff0c;就可以开始实战了。 2.界面功能解析 根据下图图标注位…

同一数据集(相同路径)的 FID 为负数

公众号&#xff1a;EDPJ 先说结论&#xff1a;这是算法中对复数取实部的结果&#xff0c;对 FID 的影响不大。 FID是从原始图像的计算机视觉特征的统计方面&#xff0c;来衡量两组图像的相似度&#xff0c;是计算真实图像和生成图像的特征向量之间距离的一种度量。 这种视觉特…

号称永不限速的它抛弃初心,网盘界从此再无净土

自从百度网盘一家独大&#xff0c;带来免费用户 KB/s 级下载体验后&#xff0c;小忆一直在期待一款免费不限速网盘。 直到阿里云盘的出现可算是满足了小忆对网盘的所有期许。 新用户初始免费容量尽管只有 100G&#xff0c;但当初通过几个简单小任务就能轻松提升至数 TB。 最重…

全方位支持图文和音视频、100+增强功能,Facebook开源数据增强库AugLy

Facebook 近日开源了数据增强库 AugLy&#xff0c;包含四个子库&#xff0c;每个子库对应不同的模态&#xff0c;每个库遵循相同的接口。支持四种模态&#xff1a;文本、图像、音频和视频。 最近&#xff0c;Facebook 开源了一个新的 Python 库——AugLy&#xff0c;该库旨在帮…

LeetCode 刷题 数据结构 数组 485 最大连续1的个数

给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,0,1,1,1] 输出&#xff1a;3 解释&#xff1a;开头的两位和最后的三位都是连续 1 &#xff0c;所以最大连续 1 的个数是 3.示例 2: 输入&#xff1a;nums […

iOS--runtime

什么是Runtime runtime是由C和C、汇编实现的一套API&#xff0c;为OC语言加入了面向对象、运行时的功能运行时&#xff08;runtime&#xff09;将数据类型的确定由编译时推迟到了运行时平时编写的OC代码&#xff0c;在程序运行过程中&#xff0c;最终会转换成runtime的C语言代…

分享200+个关于AI的网站

分享200个关于AI的网站 欢迎大家访问&#xff1a;https://tools.haiyong.site/ai 快速导航 AI 应用AI 写作AI 编程AI 设计AI 作图AI 训练模型AI 影音编辑AI 效率助手 AI 应用 文心一言: https://yiyan.baidu.com/ 百度出品的人工智能语言模型 ChatGPT: https://chat.openai.c…

2023年值得推荐的5个数据可视化平台

之前看过一篇介绍20款国外常用的数据可视化工具后&#xff0c;很多朋友在评论区表示国内也有很多很不错的主流数据可视化平台&#xff0c;今天就来给大家介绍国内5个主流的数据可视化平台。 1、阿里云DataV DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。…

大数据课程D7——hadoop的YARN

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解YARN的概念和结构&#xff1b; ⚪ 掌握YARN的资源调度流程&#xff1b; ⚪ 了解Hadoop支持的资源调度器&#xff1a;FIFO、Capacity、Fair&#xff1b; ⚪ 掌握YA…

Django实现音乐网站 ⑴

使用Python Django框架制作一个音乐网站。 目录 网站功能模块 安装django 创建项目 创建应用 注册应用 配置数据库 设置数据库配置 设置pymysql库引用 创建数据库 创建数据表 生成表迁移文件 执行表迁移 后台管理 创建管理员账户 启动服务器 登录网站 配置时区…

SpringBoot整合ActiveMQ

ActiveMQ简单使用 JMS ActiveMQ 下载安装 https://activemq.apache.org/components/classic/download/解压缩文件。进入win64目录&#xff0c;双击运行activemq.bat文件&#xff0c;运行服务 将下面的网址输入到浏览器&#xff0c;用户名和密码都是admin SpringBoot整合Act…

flutter 导出iOS问题2

问题1:The Swift pod FirebaseCoreInternal depends upon GoogleUtilities, which does not define modules. To opt into those targets generating module maps (which is necessary to import them from Swift when building as static libraries) 参考 正如上图报错第三方…

Java 源码打包 降低jar大小

这里写目录标题 Idea maven 插件配置pom.xml 配置启动技巧 Idea maven 插件配置 pom.xml 配置 <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><!-- 只…