JavaScript(19)——环境对象,回调函数,事件流

news2024/9/9 4:54:11

环境对象

指的是函数内部特殊的变量this,它代表当前函数运行时所处的环境。

  • 函数的调用方式不同,this指代的对象也不同
  • 谁调用,this就是谁
  • 直接调用函数,其实相当于是window函数,所以指代window

回调函数

如果将函数A作为参数传递给B时,我们称A为回调函数

事件流

事件流指的是事件完整执行过程中的流动路劲

说明:假设页面里有div,当事件触发时,会经历两个阶段,分别是捕获阶段和冒泡阶段

简单来说,捕获阶段就是从父到子,冒泡阶段就是从子到父

事件捕获

概念:从DOM的根元素开始去执行对应的事件(从外到里),需要写代码才能看到。

代码:

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

true代表捕获阶段,false代表冒泡阶段(默认)

事件冒泡 

概念:当一个元素被触发时,同样的事件将会在该元素的所有祖先元素中一次触发。

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果

阻止冒泡

默认就有冒泡模式的存在,所以容易导致事件影响到父级元素

语法:事件对象.stopPropagation()

此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效。 

解绑事件

on事件方式,直接使用null覆盖偶就可以实现事件的解绑

语法:

btn.onclick = function(){

  alert('点击了')

}

btn.onclick = null

 如果使用addEventListener,必须使用

removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])

例如:

function fn(){
  alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)

 注意:匿名函数无法被解绑

 

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

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

相关文章

探索局域网传输新境界 | 闪电藤 v2.2.7

在这个数字化时代,文件的快速、安全传输是我们日常工作中不可或缺的一部分。今天,电脑天空向大家介绍一款革命性的局域网文件传输工具——闪电藤,它将彻底改变你的文件传输体验。 🎨 界面设计 —— 极简之美 闪电藤采用极简的设…

【自动化测试必学语言】python:语言基础

目录 Python 介绍 语言的分类 注释 单行注释 多行注释 变量 定义变量 使用变量 变量名的命名规范 数据类型 数字类型 非数字类型 type() 函数 input输入 print输出 格式化输出 快捷键(小操作) 运算符 算术运算符 比较运算符 Python 介绍 作者: 吉…

【Java】字符串String类(011)

目录 ♦️API和API帮助文档 ♦️创建String 🎏直接赋值类 🎏new类 🐡空参类 构造方法: 举例代码: 🐡有参类 构造方法: 举例代码: 🐡字符数组类 构造方法&…

如何借助逻辑数据编织平台实现“数据优先堆栈( DFS )”

一、什么是面向“数据优先”的数据研发平台? 企业在数字化转型的浪潮中,愈发认知到数据作为核心战略资产的重要性。然而,要充分利用数据的价值并非易事。一方面,企业需要投入大量资源来建设和维护复杂的数据基础设施;另…

ref函数

Vue2 中的ref 首先我们回顾一下 Vue2 中的 ref。 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例&#xff1…

计算机基础(day1)

1.什么是内存泄漏?什么是内存溢出?二者有什么区别? 2.了解的操作系统有哪些? Windows,Unix,Linux,Mac 3. 什么是局域网,广域网? 4.10M 兆宽带是什么意思?理论…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 整数数组按个位数字排序(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆Coding ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 93 分 最新华为OD机试目录…

使用大型语言模型进行文档解析

动机 多年来,正则表达式一直是我解析文档的首选工具,我相信对于许多技术人员和行业也是如此。尽管正则表达式在某些情况下非常强大,但它们常常在面对真实世界文档的复杂性和多样性时缺少灵活性。 另一方面,大型语言模型提供了一…

Mysql输出今年1月至当前月份日期序列

#今日2024-07-29SELECTDATE_FORMAT( DATE_ADD( NOW(), INTERVAL -(CAST( help_topic_id AS SIGNED INTEGER )) MONTH ), %Y-%m ) monthsFROMmysql.help_topicWHEREhelp_topic_id < TIMESTAMPDIFF(MONTH, CONCAT(DATE_FORMAT(CURDATE(), "%Y-01-01")),CONCAT(STR_…

《动手做科研 》| 03. 如何阅读人工智能研究论文

地址链接:《动手做科研》03. 如何阅读人工智能研究论文 导读: 在刚迈入科研时&#xff0c;人人都说读论文很重要&#xff0c;但是很少有人能完整地教你应该如何读论文。论文不仅揭示了行业的最新进展和趋势&#xff0c;而且为我们提供了改进技术和解决复杂问题的思路。然而&…

你知道缓存的这个问题到底把多少程序员坑惨了吗?

在现代系统中&#xff0c;缓存可以极大地提升性能&#xff0c;减少数据库的压力。 然而&#xff0c;一旦缓存和数据库的数据不一致&#xff0c;就会引发各种诡异的问题。 我们来看看几种常见的解决缓存与数据库不一致的方案&#xff0c;每种方案都有各自的优缺点 先更新缓存&…

探索NSL-KDD数据集:入侵检测的起点

引言 在信息安全的世界里&#xff0c;数据集是我们最宝贵的资源。就像厨师离不开食材&#xff0c;数据科学家也离不开数据集。对于入侵检测系统&#xff08;IDS&#xff09;而言&#xff0c;NSL-KDD数据集无疑是一个经典的选择。今天&#xff0c;我们将深入探讨这个数据集&…

Python数据分析案例56——灰色预测、指数平滑预测人口数量,死亡率,出生率等

案例背景 时间序列的预测现在都是用神经网络&#xff0c;但是对于100条以内的小数据集&#xff0c;神经网络&#xff0c;机器学习这种方法效果表现不太好。 所以还是需要用上一些传统的统计学方法来进行预测&#xff0c;本次就使用灰色预测&#xff0c;指数平滑两大方法来分别…

MySQL学习(16):视图

视图是一种虚拟临时表&#xff0c;并不真正存储数据&#xff0c;它的作用就是方便用户查看实际表的内容或者部分内容 1.视图的使用语法 &#xff08;1&#xff09;创建 create view 视图名称 as select语句; #视图形成的虚拟表就来自于select语句所查询的实际表&#xff0c;…

突破•指针四

听说这是目录哦 函数指针数组&#x1fae7;用途&#xff1a;转移表 回调函数&#x1fae7;能量站&#x1f61a; 函数指针数组&#x1fae7; 函数指针数组是存放函数地址的数组&#xff0c;例如int (*parr[5])()中parr先和[]结合&#xff0c;说明parr是可以存放5个函数地址【元…

IT运维必备神器!PsShutdown,定时关机重启一键搞定!

嘿&#xff0c;各位技术小能手们&#xff0c;小江湖今天要给大家安利一个宝贝——PsShutdown&#xff01;这可不是一般的关机小工具哦&#xff1b;当你坐在电脑前&#xff0c;手指轻轻敲几下键盘&#xff0c;就能实现定时任务&#xff0c;无论是关机、重启&#xff0c;还是注销…

Python 爬虫入门(四):使用 pandas 处理和分析数据 「详细介绍」

Python 爬虫入门&#xff08;四&#xff09;&#xff1a;使用 pandas 处理和分析数据 「详细介绍」 前言1. pandas简介1.1 什么是pandas?1.2 为什么要使用pandas?1.3 安装 Pandas 2. pandas的核心概念2.1 Series2.2 DataFrame2.3 索引 3. 数据导入和导出3.1 从CSV文件读取数据…

uniapp app跳小程序详细配置

应用场景 app跳微信小程序&#xff0c;支付等 前提配置 1.1微信开放平台申请移动应用 1.2关键&#xff1a;开放平台的移动应用的app的包名和签名必须和uniapp app的包名一致 1.3查看unaipp app的包的签名 下载工具&#xff1a;GenSignature&#xff0c;模拟器安装工具 ht…

iframe嵌套项目后,接口跳出登入页面(会出现画中画的场景)

iframe嵌套项目后&#xff0c;接口跳出登入页面&#xff08;会出现画中画的场景&#xff09; JavaScript 跳出iframe框架 window.top top 属性返回最顶层的先辈窗口。该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口&#xff0c;top 属性存放对窗口自身的…

使用DTW算法简单实现曲线的相似度计算

相对接近产品交付形态的实现&#xff1a;基于DTW距离的KNN算法实现股票高相似筛选案例-CSDN博客 一、问题背景和思路 问题背景&#xff1a;如果你有历史股票的K线图&#xff0c;怎么从众多股票K线图中提取出TopN相似的几支股票&#xff0c;用来提供给投资者或专家做分析、决策…