Web APIs——事件监听以及案例

1、事件监听

什么是事件?

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

什么是事件监听?

就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等。

1.1 基本语法

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素:

  • 事件源:那个dom元素被事件触发了,要获取dom元素
  • 事件类型:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
  • 事件调用的函数:要做什么事
<body><button>点击</button><script>// 需求:点击了按钮,弹出一个对话框// 1. 事件源  按钮const btn = document.querySelector('button')btn.addEventListener('click',function(){alert('今天吃什么?')})// 2. 事件类型 点击鼠标// 3. 事件处理程序 弹出对话框</script>
</body>

1.1.1 事件类型 

 鼠标经过,与鼠标离开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><div></div><script>const div = document.querySelector('div')// 鼠标经过div.addEventListener('mouseenter',function(){console.log('我到了')})// 鼠标离开div.addEventListener('mouseleave',function(){console.log('我走了')})</script>
</body>
</html>

1.2 练习 

京东点击关闭顶部广告

需求:点击关闭之后,顶部关闭

<!DOCTYPE html>
<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>Document</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><script>// 1. 获取事件源const box1 = document.querySelector('.box1')//  关闭的是大盒子const box = document.querySelector('.box')// 2. 事件侦听box1.addEventListener('click', function () {box.style.display = 'none'})</script>
</body></html>

2、拓展阅读-事件监听版本

2.1 事件监听版本

DOM L0

事件源.on事件 = function(){}

DOM L2

事件源.addEventListener(事件,事件处理函数)

区别:on方式会被覆盖,addEventListener方式可以多次绑定,拥有事件更多特性

发展史:

  • DOM L0:是DOM的发展的第一个版本; L:level
  • DOM L1:DOM级别1于1998年10月1日成为W3C推荐标准
  • DOM L2:使用addEventListener注册事件
  • DOM L3:DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型

3、随机点名案例

分析:

  1. 点击开始按钮随机抽取数组的一个数据,放到页面中
  2. 点击结束按钮删除数组当前抽取的一个数据
  3. 当抽取到最后一个数据的时候,两个按钮同时禁用(写点开始里面,只剩最后一个数据不用抽了)

核心:利用定时器快速展示,停止定时器结束展示


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是:</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']// 定时器的全局变量let timerId = 0// 随机号要全局变量let random = 0// 业务1. 开始按钮模块const qs = document.querySelector('.qs')// 1.1 获取开始按钮对象const start = document.querySelector('.start')// 1.2 添加点击事件start.addEventListener('click',function(){timerId = setInterval(function(){// 随机数random = parseInt(Math.random() * arr.length)// console.log(arr[random]);qs.innerHTML = arr[random]},35)// 如果数组里面只有一个值了,就不需要抽取了,让两个按钮禁用就可以了if(arr.length === 1){// start.disabled = true// end.disabled = truestrat.disabled = end.disabled = true}})// 2. 关闭按钮模块const end = document.querySelector('.end')end.addEventListener('click',function(){clearInterval(timerId)// 结束了,可以删除掉当前抽取的那个数组元素arr.splice(random,1)console.log(arr);})</script>
</body></html>

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

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

相关文章

【RocketMQ集群】Linux搭建RocketMQ双主双从集群

在当今大数据时代&#xff0c;消息队列系统成为了构建高可用、可扩展和可靠的分布式应用的重要组件之一。而Apache RocketMQ作为一款开源的分布式消息中间件&#xff0c;以其高吞吐量、低延迟和可靠性而备受青睐。为了满足大规模应用的需求&#xff0c;搭建RocketMQ集群是一种常…

基于springboot实现基于Java的超市进销存系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现基于Java的超市进销存系统演示 摘要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;超市进销存系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#x…

Weights and Biases使用教程

Weights and Biases使用教程 安装和初始化实验跟踪跟踪指标跟踪超参数可视化模型检查日志 数据和模型版本控制使用Sweeps进行超参数调优数据可视化report Weights and Biases已经成为AI社区中最受欢迎的库之一。该团队在创建了一个平台&#xff0c;使机器深度学习学习工程师能够…

云安全—docker原理

0x00 前言 因为要学习docker相关的检测技术&#xff0c;所以需要对docker的原理进行基本的原因&#xff0c;不求彻底弄懂&#xff0c;但求懂点皮毛&#xff0c;如有不妥之处&#xff0c;还请斧正。 0x01 docker概述 docker起源 docker公司是在旧金山&#xff0c;由法裔美籍…

Java操作Elasticsearch(新增数据)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

广告掘金全自动挂机项目,单设备30+【软件脚本+技术教程】

广告掘金项目是一种越来越受欢迎的赚钱方式&#xff0c;它通过观看广告视频来获取收益。然而&#xff0c;手动观看每个广告视频可能会耗费大量时间和精力。为了简化操作并提升效率&#xff0c;我们可以利用全自动挂机脚本来完成这一任务。接下来&#xff0c;将为您介绍如何使用…

PLC单按钮启停算法汇总

单按钮启停在三菱PLC里可以通过简单的取反指令"ALT"实现,西门子PLC如何实现ALT指令,请参考下面文章链接,这篇博客我们汇总常用的单按钮启停实现方法,希望大家读了本篇博客后有所收获。 博途ALT指令 博途S7-1200/1500PLC 取反指令(ALT)-CSDN博客SMART PLC的ALT指…

安卓 实现60s倒计时的CountDownTimer(小坑)

安卓 实现60s倒计时的CountDownTimer&#xff08;小坑&#xff09; 前言一、CountDownTimer 是什么&#xff1f;二、代码示例1.使用2.小坑的点误差及时取消 总结 前言 前段时间写倒计时没有用线程&#xff0c;想换一种实现方式结果踩了个小坑&#xff0c;特此记录。 一、Count…

pymavlink简单使用

环境 windows10 python3.11 pymavlink2.4.40 工具 虚拟串口工具 Virtual Serial Port Driver 6.9 串口/网络调试助手 sscom5.13.1.exe 串口通信 虚拟串口 COM1, COM2 调试助手连接COM2 pymavlink连接COM1 from pymavlink import mavutil import timeconnect mavut…

LabVIEW应用开发——控件的使用(三)

接上文&#xff0c;这篇介绍簇Cluster控件。 LabVIEW应用开发——控件的使用&#xff08;二&#xff09; 1、簇Cluster 1&#xff09;创建 蔟控件又称为组合、集群控件&#xff0c;顾名思义它是一个类似于C语言的结构体的一个数据结构控件。在描述一个对象的时候&#xff0c;…

SpringCloud 微服务全栈体系(三)

第五章 Nacos 注册中心 国内公司一般都推崇阿里巴巴的技术&#xff0c;比如注册中心&#xff0c;SpringCloudAlibaba 也推出了一个名为 Nacos 的注册中心。 一、认识和安装 Nacos 1. 认识 Nacos Nacos是阿里巴巴的产品&#xff0c;现在是SpringCloud中的一个组件。相比Eure…

“创新启变 聚焦增长”极狐(GitLab)媒体沟通会,共话智能时代软件开发新生态

10 月 18 日 北京 昨日&#xff0c;全球领先 AI 赋能 DevSecOps 一体化平台极狐(GitLab) 在北京举办了主题为“创新启变 聚焦增长”的媒体沟通会。极狐(GitLab) CEO 柳钢就“中国企业数字化转型、软件研发、技术自主可控等热点问题&#xff0c;以及 AI 大模型时代下&#xff0c…

论文阅读 - Coordinated Behavior on Social Media in 2019 UK General Election

论文链接&#xff1a; https://arxiv.org/abs/2008.08370 目录 摘要&#xff1a; Introduction Contributions Related Work Dataset Method Overview Surfacing Coordination in 2019 UK GE Analysis of Coordinated Behaviors 摘要&#xff1a; 协调的在线行为是信息…

SAP POorPI RFC接口字段调整后需要的操作-针对SP24及以后的PO系统

文章目录 问题描述解决办法 问题描述 在SAP系统的RFC接口结构中添加了字段&#xff0c;RFC也重新引用到了PO系统&#xff0c;Cache和CommunicationChannel都刷新或启停了&#xff0c;但是新增的字段在调用接口的时候数据进不到SAP系统&#xff0c;SAP系统内的值也出不来。经过…

异步编程详解(.NET)

在之前写的一篇关于async和await的前世今生的文章之后&#xff0c;大家似乎在async和await提高网站处理能力方面还有一些疑问&#xff0c;很多网站本身也做了不少的尝试。今天我们再来回答一下这个问题&#xff0c;同时我会做一个async和await在WinForm中的尝试&#xff0c;并且…

html5语义化标签

目录 前言 什么是语义化标签 常见的语义化标签 语义化的好处 前言 HTML5 的设计目的是为了在移动设备上支持多媒体。之前网页如果想嵌入视频音频&#xff0c;需要用到 flash &#xff0c;但是苹果设备是不支持 flash 的&#xff0c;所以为了改变这一现状&#xff0c;html5 …

QWidget快速美化-蓝色边框圆角按钮

将代码复制进QPushButton的样式表 效果: 代码: QPushButton{ color:#52DCFE;border:2px solid #52DCFE;border-radius:5px; }QPushButton::hover{background-color:#52DCFE;color:#ffffff; }QPushButton::pressed,QPushButton::checked{background-color:#52DCFE;color:#ffff…

adb: error: 46-byte write failed: Invalid argument

使用adb pull可以&#xff0c;但是adb push fail。 貌似是adb的问题&#xff0c;将adb.exe 重命名为pdb&#xff0c;使用pdb push就行了。

用Node.js开发基于稳定扩散的AI应用

在本文中&#xff0c;我们将介绍如何构建一个 Web 应用程序&#xff0c;该应用程序使用 ChatGPT 和 Stable Diffusion 为你提供的任何网站描述生成徽标和合适的域名。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 1、介绍 人工智能正在接管世界。 这些技术每天都在震…

如何安装ubuntu22.04以及ubuntu各个版本配置国内源和ssh远程登录

目录 一.简介 二.配置root账号 三、配置IP地址 四、更换阿里云源 五、配置ssh&#xff0c;root可以远程登录安装ssh服务 VMware17.0安装教程(2023最新最详细)-CSDN博客 VMware虚拟机安装Ubuntu22.04教程&#xff08;2023最新最详细&#xff09;-CSDN博客 Ubuntu22.04&am…