您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

web API第三天:事件流、事件委托、滚动事件

时间:2022-07-06 12:16:21  来源:  作者:金乾坤

1.事件流

事件流是对事件执行过程的描述,了解事件的执行过程有助于加深对事件的理解,提升开发实践中对事件运用的灵活度。

2.捕获和冒泡

捕获阶段是【从父到子】的传导过程,冒泡阶段是【从子向父】的传导过程。

// 第三个形参加true就是事件捕获
 document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
 },true)
// 第三个形参加flase就是事件冒泡.
document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
 },flase)

// 事件冒泡可以不用加flase,因为默认值就是flase.事件捕获需要加true

3.阻止冒泡

1- 阻止事件冒泡 e.stopPropagation(),仅在自身实现.

2- 阻止网页跳转 e.preventDefault(), a标签和表单有默认跳转和提交,可以用这个阻止跳转和提交.

// 阻止事件冒泡
document.querySelector('.box1').addEventListener('click',function(e){
 console.log(2);
e.stopPropagation()
 },false)
// 阻止a标签进行网页跳转
 document.querySelector('a').addEventListener('click',function(e){
  e.preventDefault()
   alert('跳转失败了')
  })

4.解绑事件(了解即可)

// L0级别写法
 box1.onclick = function(){
console.log('注册了事件');
 }
box2.onclick = function(){
// 将box1身上的点击事件解绑,dom元素.on事件类名 = null
box1.onclick = null
 }

5.事件委托

1- 事件委托的原理: 利用事件冒泡的机制(从里往外)将事件注册委托给父元素.

2- 事件委托的优点: 减少代码量,提高浏览器解析速度.

// 获取ul DOM对象
 const ul = document.querySelector('ul')
// 给ul 注册点击事件
ul.addEventListener('click',function(e){
// e.target 指的是事件触发的元素,事件源.tagName 指的是元素名字.
// e.target.tagName === 'LI' 是用排除法将UL/P,给排除了,只有点击LI时,才会触发事件,打印出'hello'
if(e.target.tagName === 'LI'){
console.log('hello');
 }
 })

6.滚动事件

// 2. 给页面注册滚动事件(重点)
 // 2.1页面 window对象或者document对象注册scroll事件
window.addEventListener('scroll',function(e){
// 2.2 监测页面卷去的距离,要设置变量获取这个值
const jin = document.documentElement.scrollTop
// 2.3 当卷起的值大于等于300时,box2这个盒子显示出来,否则就隐藏起来.
if(jin >= 300){
box2.style.display = 'block'
 }else{
box2.style.display = 'none'
 }
 })

7.页面加载事件

加载外部资源(如图片、外联cssJAVAScript等)加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

事件名:load

window.addEventListener('load', function() {
// xxxxx
})

8.页面尺寸事件

会在窗口尺寸改变的时候触发事件

window.addEventListener('resize', function() {
// xxxxx
})


Tags:API   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
中国三大运营商共同发布通过GSMA Open Gateway认证的一次性密码 API
3月26日,北京:中国三大领先的移动运营商——中国移动、中国电信和中国联通今日发布商用OTP API(一次性密码API)服务,并通过了GSMA Open Gateway认证。此次发布标志着中...【详细内容】
2024-03-26  Search: API  点击:(24)  评论:(0)  加入收藏
如何免费访问和使用Gemini API?
Gemini是谷歌开发的一个新模型。有了Gemini可以为查询提供图像、音频和文本,获得几乎完美的答案。 我们在本教程中将学习Gemini API以及如何在机器上设置它。我们还将探究各...【详细内容】
2024-02-19  Search: API  点击:(65)  评论:(0)  加入收藏
构建 Web API 的两种流行选择:REST vs GraphQL
在 RESTful 和 GraphQL API 之间的选择取决于您的具体用例。RESTful API 适用于需要高可伸缩性的简单应用程序,而 GraphQL 则适用于具有不同数据需求的复杂应用程序。简介RES...【详细内容】
2024-01-09  Search: API  点击:(66)  评论:(0)  加入收藏
FastAPI:高性能Web框架的简介与应用
正文:在当今互联网时代,构建高性能的WebAPI是许多开发人员的关注重点。而FastAPI作为一个现代、快速的Web框架,为基于标准Python类型提示的API构建提供了强大的支持。FastAPI的...【详细内容】
2023-12-27  Search: API  点击:(106)  评论:(0)  加入收藏
理解 Spark 写入 API 的数据处理能力
这张图解释了 Apache Spark DataFrame 写入 API 的流程。它始于对写入数据的 API 调用,支持的格式包括 CSV、JSON 或 Parquet。流程根据选择的保存模式(追加、覆盖、忽略或报...【详细内容】
2023-12-13  Search: API  点击:(154)  评论:(0)  加入收藏
如何在Python中使用ChatGPT API处理实时数据
译者 | 李睿审校 | 重楼OpenAI公司推出的GPT如今已经成为全球最重要的人工智能工具,并精通基于其训练数据处理查询。但是,它不能回答未知话题的问题,例如: 2021年9月之后的近期...【详细内容】
2023-12-13  Search: API  点击:(251)  评论:(0)  加入收藏
伪原创API是什么?六个角度了解伪原创API
伪原创API,听起来可能对许多人来说是一个陌生的术语。然而,在当今数字化时代,尤其是在内容创作和网络营销领域,伪原创API正逐渐崭露头角。在本文中,我将向您深入介绍伪原创API是...【详细内容】
2023-12-11  Search: API  点击:(162)  评论:(0)  加入收藏
使用FastAPI部署YOLO模型的步骤
在计算机视觉领域,You Only Look Once (YOLO) 算法已经崭露头角,成为一种改变游戏规则的算法。它承诺具有卓越准确性的实时目标检测,使其成为从监视和自动驾驶车辆到图像和视频...【详细内容】
2023-12-06  Search: API  点击:(165)  评论:(0)  加入收藏
构建强大REST API的十个最佳实践
在项目开发中,我们经常会使用REST风格进行API的定义,这篇文章为大家提供10条在使用REST API时的最佳实践。希望能够为你带来灵感和帮助。1、使用具体且有意义的资源名称选择能...【详细内容】
2023-12-06  Search: API  点击:(151)  评论:(0)  加入收藏
前端请求到后端API的中间件流程解析
在前端请求到后端API的典型流程中,经过一系列中间件的处理,确保请求的顺利处理和安全性。以下是中间件的详细解析:1. 前端请求用户在前端发起请求,包括请求的URL、参数、以及其...【详细内容】
2023-12-06  Search: API  点击:(127)  评论:(0)  加入收藏
▌简易百科推荐
Meta如何将缓存一致性提高到99.99999999%
介绍缓存是一种强大的技术,广泛应用于计算机系统的各个方面,从硬件缓存到操作系统、网络浏览器,尤其是后端开发。对于Meta这样的公司来说,缓存尤为重要,因为它有助于减少延迟、扩...【详细内容】
2024-04-15    dbaplus社群  Tags:Meta   点击:(3)  评论:(0)  加入收藏
SELECT COUNT(*) 会造成全表扫描?回去等通知吧
前言SELECT COUNT(*)会不会导致全表扫描引起慢查询呢?SELECT COUNT(*) FROM SomeTable网上有一种说法,针对无 where_clause 的 COUNT(*),MySQL 是有优化的,优化器会选择成本最小...【详细内容】
2024-04-11  dbaplus社群    Tags:SELECT   点击:(3)  评论:(0)  加入收藏
10年架构师感悟:从问题出发,而非技术
这些感悟并非来自于具体的技术实现,而是关于我在架构设计和实施过程中所体会到的一些软性经验和领悟。我希望通过这些分享,能够激发大家对于架构设计和技术实践的思考,帮助大家...【详细内容】
2024-04-11  dbaplus社群    Tags:架构师   点击:(2)  评论:(0)  加入收藏
Netflix 是如何管理 2.38 亿会员的
作者 | Surabhi Diwan译者 | 明知山策划 | TinaNetflix 高级软件工程师 Surabhi Diwan 在 2023 年旧金山 QCon 大会上发表了题为管理 Netflix 的 2.38 亿会员 的演讲。她在...【详细内容】
2024-04-08    InfoQ  Tags:Netflix   点击:(5)  评论:(0)  加入收藏
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(9)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(16)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(14)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(9)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(15)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(10)  评论:(0)  加入收藏
站内最新
站内热门
站内头条