JavaScript-4

事件监听

  • 什么是事件：
在编程时系统内发生的动作或者发生的事情。比如：用户在网页上单击一个按钮
  • 什么是事件监听：
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应
也称为"绑定事件或者注册事件"	（比如：点击按钮可以切换图片）
  • 事件监听三要素
事件源：某个DOM元素触发了事件
事件类型：用什么方式触发（比如：鼠标单击click、鼠标经过mouseover等）
事件调用的函数：要做什么事情
  • 语法：
元素对象.addEventListener('事件类型', 要执行的函数)
  • 演示
<body><button>点击</button><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('Hello World')})</script>
</body>

两种注册事件的区别

传统 on 注册

  • 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
  • 直接使用 null 覆盖就可以实现事件的解绑
  • 都是冒泡阶段执行的

事件监听注册

  • 后面注册的事情不会覆盖到前面注册的事件
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用 removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段) 进行事件的解绑操作
  • 匿名函数无法被解绑

事件类型

鼠标事件

click鼠标点击
mouseenter鼠标进入
mouseleave鼠标离开

焦点事件

focus获得焦点
blur失去焦点

键盘事件

keydown键盘按下触发
keyup键盘抬起触发

文本事件

input用户输入事件

具体演示

  • 鼠标事件
<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: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')div.addEventListener('mouseenter', function () {div.style.backgroundColor = 'green'})div.addEventListener('mouseleave', function () {div.style.backgroundColor = 'red'})</script>
</body>
  • 焦点事件
<body><span>请输入</span><input type="text"><script>const span = document.querySelector('span')const input = document.querySelector('input')input.addEventListener('focus', function () {span.style.color = 'red'span.innerText = '输入中'})input.addEventListener('blur', function () {span.style.color = 'green'span.innerText = '已完成'})</script>
</body>
  • 键盘事件
    <div>键盘当前状态:<span>弹起</span></div><input type="text"><script>const span = document.querySelector('span')const input = document.querySelector('input')input.addEventListener('keydown', function () {span.style.color = 'red'span.innerText = '按下'})input.addEventListener('keyup', function () {span.style.color = 'green'span.innerText = '弹起'})</script>
  • 文本事件
<body><input type="text"><div>当前输入: <span></span></div><script>const input = document.querySelector('input')const span = document.querySelector('span')input.addEventListener('input', function () {span.style.color = 'red'span.innerHTML = input.value})</script>
</body>

事件对象

基本概念

事件对象是什么?它是一个对象，这个对象里有事情触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置的信息使用场景：可以判断用户按下了哪个键，比如：按下回车键可以发布新闻可以判断鼠标点击了哪个元素，从而做出相应操作事件对象在哪里？事件绑定的回调函数的第一个参数

具体演示

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

环境对象

环境对象，指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境
（粗略判断规则：谁调用，this 就是谁）

<body><button>点击</button><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {this.style.color = 'red'    // 等效于 btn.style.color = 'red'})</script>
</body>

回调函数

概念：如果将函数A做为参数，传递给函数B，我们称函数A为回调函数

事件流

基本概念

  • 事件流：指的是事件完整执行过程中的流动路径
  • 捕获阶段：Document =》Element html =》Element body =》Element div
  • 冒泡阶段：Element div =》Element body =》Element html =》Document
语法：元素.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)注意：addEventListener第三个参数传入true：代表是捕获阶段（很少使用）addEventListener第三个参数传入false或者不写：代表是冒泡阶段

捕获

<body><div class="father"><div class="son">点我</div></div><script>const father = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click', function () {alert('I am grandfather')}, true)father.addEventListener('click', function () {alert('I am father')}, true)son.addEventListener('click', function () {alert('I am son')}, true)</script>
</body>

当鼠标点击"点我"时候，弹出框弹出的先后顺序是：I am grandfatherI am fatherI am son

冒泡

<body><div class="father"><div class="son">点我</div></div><script>const father = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click', function () {alert('I am grandfather')}, false)father.addEventListener('click', function () {alert('I am father')}, false)son.addEventListener('click', function () {alert('I am son')}, false)</script>
</body>

当鼠标点击"点我"时候，弹出框弹出的先后顺序是：I am sonI am fatherI am grandfather

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事情影响到父级元素需求：若想把事情就限制在当前元素内，就需要阻止事件冒泡语法：事件对象.stopPropagation()注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

<body><div class="father"><div class="son">点我</div></div><script>const father = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click', function () {alert('I am grandfather')}, false)father.addEventListener('click', function () {alert('I am father')}, false)son.addEventListener('click', function (event) {alert('I am son')// 阻止事件冒泡event.stopPropagation()}, false)</script>
</body>

事件解绑

  • 解绑方式一
<body><button>确认</button><script>const btn = document.querySelector('button')btn.onclick = function () {alert('用户点击了确认')btn.onclick = null  // 解绑操作}</script>
</body>
  • 解绑方式二（常见）
<body><button>确认</button><script>const btn = document.querySelector('button')// 匿名函数无法解绑function judge() {alert('用户点击了确认')}btn.addEventListener('click', judge)btn.removeEventListener('click', judge)</script>
</body>

事件委托

基本理解

情景带入

需求：要求点击某个li，那个li就变成红色。	<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>解决办法：方式一：给每个li都添加一个事件（太麻烦）方式二：使用事件委托，将事件委托给ul进行处理

事件委托的优点：减少注册事件的次数，可以提供程序性能

事件委托的原理：利用事件冒泡的特点（给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件）

具体演示

<body><ul><li>li-1</li><li>li-2</li><li>li-3</li><li>li-4</li><li>li-5</li><p>我是p标签</p></ul><script>// 需求：点击小li，当前li文字变红色，点击其他标签不变色const ul = document.querySelector('ul')ul.addEventListener('click', function (event) {if (event.target.tagName === 'LI') {event.target.style.color = 'red'    // 找到点击所触发的元素：event.target}})</script>
</body>

阻止默认行为

<body><form action="https://www.baidu.com"><input type="submit" value="免费注册"></form><script>const form = document.querySelector('form')form.addEventListener('submit', function (event) {// 阻止默认行为，此处的默认行为是"提交"event.preventDefault()})</script>
</body>

<body><a href="">点击跳转</a><script>const a = document.querySelector('a')a.addEventListener('click', function (event) {// 阻止默认行为，此处的默认行为是"跳转"event.preventDefault()})</script>
</body>

其他事件

页面加载事件

  • 基本认识
作用：可以控制：先加载外部资源（如：图片、CSS、JS等）加载完毕时触发的事件意义：1.有些时候，我们需要等页面所有资源全部加载完了，再做一些事情2.一些老项目的代码，往往把 script 写在 head 中
  • 监听整个页面资源是否加载完成
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 等待页面所有资源加载完毕，才会去执行回调函数window.addEventListener('load', function () {// ......// 请在此处写当前这个回调函数具体要实现的功能// ......})</script>
</head>
  • 注意：load 不仅可以监听整个页面资源加载完成，也可以针对某个资源绑定 load 事件
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 等待图片加载完毕，才会去执行回调函数img.addEventListener('load', function () {//......})</script>
</head>
  • 当初始的 HTML 文档被完全加载和解析完成后，DOMContentLoaded 事件被触发，而无需等待CSS样式表、图像等完全加载（此方法更快加载事件）
// 监听页面 DOM 加载完毕document.addEventListener('DOMContentLoaded', function () {// ......})

页面滚动事件

基本认识

含义：滚动条在滚动的时候持续触发的事件意义：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部

监听滚动

  • 监听页面滚动
<body><div style="height: 2000px;"></div><script>// 页面滚动事件window.addEventListener('scroll', function () {console.log('我滚动了');})</script>
</body>
  • 监听某个元素内部的滚动
<body><div style="width: 50px; height: 150px; overflow: scroll;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><script>// 监听div元素内部的滚动const div = document.querySelector('div')div.addEventListener('scroll', function () {console.log('我滚动了');})</script>
</body>

获取位置

  • 基本认识
属性：scrollLeft 和 scrollTop作用：获取元素内容往左、往上滚动出去的距离注意：1.此属性既可以读取当前距离，也可以给它进行距离的赋值！2.本文只通过两个"向上滚动的距离"进行演示
  • 演示一：输出 div 元素向上滚动的距离
<body><div style="width: 50px; height: 150px; overflow: scroll;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><script>const div = document.querySelector('div')// 输出: div元素向上滚动的距离div.addEventListener('scroll', function () {console.log(div.scrollTop);})</script>
</body>
  • 演示二：输出窗口向上滚动的距离
<body><div style="height: 2000px;"></div><script>// 补充知识：获取html元素对象的写法是 document.documentElement// 输出: 窗口向上滚动距离window.addEventListener('scroll', function(){console.log(document.documentElement.scrollTop);})</script>
</body>
  • 扩展
跳转到窗口的某个滚动距离：方法一：利用 scrollTop 的可赋值性，document.documentElement.scrollTop = 100px方法二：windows.scrollTO(x, y)

页面尺寸事件

  • 尺寸改变，触发事件
<body><script>// 窗口尺寸改变的时候，触发事件window.addEventListener('resize', function () {console.log("窗口尺寸改变了！");})</script>
</body>
  • 获取元素宽高
注意：通过获取元素的可见部分宽高，不包含边框，margin，滚动条属性：clientWidth 和 clientHeight

<body><div style="display: inline-block;">随着内容的变化，span标签的宽度也随之变化</div><script>const div = document.querySelector('div')console.log(div.clientWidth);</script>
</body>

元素的尺寸与位置

获取宽高

介绍：1.获取元素的自身宽高、包含元素自身设置的宽高、padding、border2.获取出来的是数值，方便计算属性：offsetWidth 和 offsetHeight注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

<body><div style="width: 100px;height: 100px; background-color: pink; margin: 100px auto;"></div><script>const div = document.querySelector('div')console.log(div.offsetWidth);console.log(div.offsetHeight);</script>
</body>

获取位置

介绍：获取元素距离自己"有定位的"父级元素的左、上距离属性：offsetLeft 和 offsetTop注意：这两个属性是只读属性，不能赋值。

<body><div style="width: 100px;height: 100px; background-color: pink; margin: 100px auto;"></div><script>const div = document.querySelector('div')// div 与它"有定位"的父级的距离console.log(div.offsetTop);console.log(div.offsetLeft);</script>
</body>

速查(属性总结)

属性作用说明
scrollLeft 和 scrollTop被卷去的头部和左侧配合页面滚动使用（可读写）
clientWidth 和 clientHeight获得元素宽度和高度不包含border、margin、滚动条，用于js获取元素大小（只读属性）
offsetWidth 和 offsetHeight获取元素宽度和高度包含border、padding，滚动条等（只读属性）
offsetLeft 和 offsetTop获取元素距离自己定位父级元素的左、上距离在获取元素定位的时候使用（只读属性）

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

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

相关文章

多种采购方式下，数智化招标采购系统建设解决方案

多种采购方式下，数智化招标采购系统建设解决方案

广发证券成立于1991年&#xff0c;是国内首批综合类证券公司&#xff0c;先后于2010年和2015年在深圳证券交易所及香港联合交易所主板上市。 多年来&#xff0c;广发证券在竞争激烈、复杂多变的行业环境中努力开拓、锐意进取&#xff0c;以卓越的经营业绩、持续完善的全面风险…
阅读更多...
Python——猜猜心里的数字（1）

Python——猜猜心里的数字（1）

首先呢&#xff0c;我们自定义一个数字&#xff0c;然后让对方猜一猜是否能猜中&#xff0c;接下来我们以10为例&#xff0c;给对方三次机会。 num10 if int(input("请猜一个数字:"))num:print("恭喜第一次就猜对了") elif int(input("猜错了&#x…
阅读更多...
每日一题——LeetCode1128.等价多米诺骨牌对的数量

每日一题——LeetCode1128.等价多米诺骨牌对的数量

先尝试暴力解法&#xff1a; var numEquivDominoPairs function(dominoes) {var count0for(let i0;i<dominoes.length-1;i){for(let ji1;j<dominoes.length;j){if((dominoes[i][0]dominoes[j][0] && dominoes[i][1]dominoes[j][1]) || (dominoes[i][0]dominoes…
阅读更多...
MySQL 为什么 InnoDB 是默认引擎

MySQL 为什么 InnoDB 是默认引擎

MySQL 为什么 InnoDB 是默认引擎&#xff1f; 聚集索引是指数据库表行中数据的物理顺序与键值的逻辑&#xff08;索引&#xff09;顺序相同。一个表只能有一个聚簇索引&#xff0c;因为一个表的物理顺序只有一种情况&#xff0c;所以&#xff0c;对应的聚簇索引只能有一个。聚簇…
阅读更多...
Mac下载Navicat premium提示文件损坏的解决方案

Mac下载Navicat premium提示文件损坏的解决方案

引用&#xff1a;https://blog.csdn.net/weixin_44898291/article/details/120879508 sudo xattr -r -d com.apple.quarantine
阅读更多...
js：使用canvas画一个半圆

js：使用canvas画一个半圆

背景 需求需要画一个半圆&#xff0c;或者多半圆&#xff0c;其实一下子就能想到 canvas 中的圆弧&#xff0c;核心使用 context.arc context.arc(x,y,r,sAngle,eAngle,counterclockwise)接下来我们看看示例 例一 <!DOCTYPE html> <html lang"en"> &…
阅读更多...
【野火i.MX6NULL开发板】GCC 和 Hello World

【野火i.MX6NULL开发板】GCC 和 Hello World

0、前言 参考资料&#xff1a; 《野火 Linux 基础与应用开发实战指南基于 i.MX6ULL 系列》PDF 第23章 1、教程
阅读更多...
2024美赛数学建模思路 - 复盘：校园消费行为分析

2024美赛数学建模思路 - 复盘：校园消费行为分析

文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…
阅读更多...
Linux学习记录——사십이 高级IO（3）--- Poll型服务器

Linux学习记录——사십이 高级IO（3）--- Poll型服务器

文章目录 1、认识poll接口2、实现3、特点 1、认识poll接口 #include <poll.h> int poll(struct pollfd *fds, nfds_t nfds, int timeout);// pollfd结构 struct pollfd {int fd; /* file descriptor */short events; /* requested events */short revents; /* returned…
阅读更多...
BitMap源码解析

BitMap源码解析

文章目录 前言数据结构添加与删除操作 JDK中BitSet源码解析重要成员属性初始化添加数据清除数据获取数据size和length方法集合操作&#xff1a;与、或、异或优缺点 前言 为什么称为bitmap&#xff1f; bitmap不仅仅存储介质以及数据结构不同于hashmap&#xff0c;存储的key和v…
阅读更多...
5.3 Verilog 带参数例化

5.3 Verilog 带参数例化

5.3 Verilog 带参数例化 分类 Verilog 教程 关键词&#xff1a; defparam&#xff0c;参数&#xff0c;例化&#xff0c;ram 当一个模块被另一个模块引用例化时&#xff0c;高层模块可以对低层模块的参数值进行改写。这样就允许在编译时将不同的参数传递给多个相同名字的模块…
阅读更多...
element：日历 / 使用记录

element：日历 / 使用记录

一、预期效果 Element - The worlds most popular Vue UI framework element默认样式 目标样式 二、Calendar 属性 参数说明类型可选值默认值value / v-model绑定值Date/string/number——range时间范围&#xff0c;包括开始时间与结束时间。开始时间必须是周一&#xff0c;…
阅读更多...
c语言线性方式初始化二维数组

c语言线性方式初始化二维数组

线性方式初始化二维数组&#xff0c;只需要利用/与%的关系即可。具体细节文章下面会有程序的流程分析 问题起源 想要用线性方式初始化二维数组 问题分析 例如a[3][4] a[0][0] a[0][1] a[0][2] a[0][3] a[1][0] a[1][1] a[1][2] a[1][3] a[2][0] a[2][1] a[2][2] a[2][3]如…
阅读更多...
Flutter-Web从0到部署上线(实践+埋坑)

Flutter-Web从0到部署上线(实践+埋坑)

本文字数&#xff1a;7743字 预计阅读时间&#xff1a;60分钟 01 前言 首先说明一下&#xff0c;这篇文章是给具备Flutter开发经验的客户端同学看的。Flutter 的诞生虽然来自 Google 的 Chrome 团队&#xff0c;但大家都知道 Flutter 最先支持的平台是 Android 和 iOS&#xff…
阅读更多...
PHP在线文档管理系统源码

PHP在线文档管理系统源码

PHP在线文档管理系统源码 系统功能与介绍 在数据持续、快速增长背景下&#xff0c;企业面临海量非结构化数据处理需求&#xff0c;企业现有架构 通常无法应对海量非结构化数据的管理与应用。 支持私有化部署&#xff0c;完全内网环境下也可正常使用。 Windows、Linux、Mac等全平…
阅读更多...
7个向量数据库对比：Milvus、Pinecone、Vespa、Weaviate、Vald、GSI 和 Qdrant

7个向量数据库对比：Milvus、Pinecone、Vespa、Weaviate、Vald、GSI 和 Qdrant

本文简要总结了当今市场上正在积极开发的7个向量数据库&#xff0c;Milvus、Pinecone、Vespa、Weaviate、Vald、GSI 和 Qdrant 的详细比较。 我们已经接近在搜索引擎体验的基础层面上涉及机器学习&#xff1a;在多维多模态空间中编码对象。这与传统的关键字查找不同&#xff08…
阅读更多...
通过代理连接sftp

通过代理连接sftp

通过nginx代理连接sftp 1.问题描述2.代码实现3.nginx配置3.1 创建sftp.stream文件3.2 修改nginx配置 4.重启nginx生效 1.问题描述 问题是这样的。我们现在需要在微服务所在内网的A机器连接到外网的sftp&#xff0c;但是网络又不能直接到达。然后A机器到B机器是通过的&#xff…
阅读更多...
【SAP】如何删除控制范围

【SAP】如何删除控制范围

经历就是财富&#xff0c;可你终将遗忘。期望文字打败时间。 本周心惊胆战地在配置系统删除了一个控制范围&#xff0c;还是有些收获&#xff0c;特此记录一下。 背景&#xff1a;在删除控制范围之前&#xff0c;我主要做了如下配置。 定义控制范围&#xff08;自动生成了成本…
阅读更多...
【UEFI基础】EDK网络框架（IP4）

【UEFI基础】EDK网络框架（IP4）

IP4 IP4协议说明 IP全称Internet Protocol&#xff0c;它属于网络层&#xff0c;对其下各种类型的数据链路层进行了包装&#xff0c;这样网络层可以跨越不同的数据链路&#xff0c;即使是在不同的数据链路上也能实现两端节点之间的数据包传输。 IP层的主要作用就是“实现终端…
阅读更多...
Linux基础使用教程

Linux基础使用教程

一、引言 Linux是一种流行的开源操作系统&#xff0c;广泛应用于服务器、桌面和移动设备等领域。它具有强大的命令行界面和丰富的软件生态系统&#xff0c;使得用户可以轻松地完成各种任务。本教程将带你入门Linux的基础使用&#xff0c;包括文件管理、命令行操作和系统管理等…
阅读更多...
最新文章

Copyright @ 2022~2023