当前位置: 首页 > news >正文

js【详解】事件

给 DOM 节点绑定事件

推荐使用 addEventListener 函数

  • 第一个参数:事件名称
  • 第二个参数:事件处理函数(第一个参数为 event)
  • 第三个参数:
    • true 采用捕获法来处理事件
    • false 【推荐】采用冒泡法来处理事件
let div1= document.getElementById('div1');
div1.addEventListener('click', function(event){alert('div1_clicked!');
}, false);

event 参数的用途

  • event.target 获取触发事件的元素

  • event.preventDefault() 阻止默认行为

    默认行为如:a标签点击跳转、鼠标右键弹出菜单、滑动滚轮控制滚动条等

  • event.stopPropagation() 阻止事件传播(冒泡/捕获)

事件流(含事件冒泡,事件捕获)

https://blog.csdn.net/weixin_41192489/article/details/133140101

【必考】事件代理

借助其他元素来响应自身事件即事件代理。

应用范例:对于内容很多的列表,为了避免给每一个列表中的元素都绑定一个点击事件,仅在列表的容器元素上绑定点击事件,则当点击列表中的元素时,因事件冒泡机制,会触发容器元素的点击事件,再在该事件中,识别出点击的具体元素,并执行相应的处理。

// 列表内容很多的容器
const div3 = document.getElementById("div3");// 点击列表中a标签的元素时,弹窗显示其内容
div3.addEventListener("click", (event) => {event.preventDefault();let target = event.target;if (target.nodeName === "A") {alert(target.innerHTML);}
});

【考题】写一个通用的事件绑定函数

/*** 通用的事件绑定函数(支持事件代理)* @param {*} elem      触发事件的元素* @param {*} type      事件类型* @param {*} selector  选择器* @param {*} fn        事件处理函数*/
function bindEvent(elem, type, selector, fn) {//若只传入了三个参数(即普通的事件绑定),则第三个参数才是事件处理函数if (fn == null) {// 将第三个参数设置为事件处理函数fn = selector;// 将选择器置空selector = null;}// 绑定事件elem.addEventListener(type, (event) => {// 获取触发事件的元素const target = event.target;if (selector) {// 传入了选择器,则为事件代理绑定if (target.matches(selector)) {// 若触发事件的元素与选择器匹配,则执行事件处理函数fn.call(target, event); // 利用 call 改变事件处理函数中 this 的指向}} else {// 没有选择器,为普通事件绑定fn.call(target, event);}});
}

使用

// 普通事件绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {event.preventDefault()alert(this.innerHTML)
})// 事件代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {event.preventDefault()alert(this.innerHTML)
})

【考题】描述事件冒泡的流程

事件基于 DOM 树形结构顺着触发元素不断向上传播(由内层节点传播到外层节点),触发各级父辈节点对应的事件,若父辈节点中没有阻断事件的冒泡传播,则会一直传播到window 对象。

应用场景:事件代理(参考上文)

【考题】无限下拉图片列表,如何监听每个图片的点击

通过事件代理实现,具体逻辑如下:

  • 在列表容器上绑定点击事件
  • 点击图片时,会冒泡触发列表容器的点击事件
  • 通过 e.target 获取到触发元素
  • 通过 matches 判断触发元素是否是图片
  • 是图片,则执行相应的代码,不是图片则不执行。

相关文章:

js【详解】事件

给 DOM 节点绑定事件 推荐使用 addEventListener 函数 第一个参数:事件名称第二个参数:事件处理函数(第一个参数为 event)第三个参数: true 采用捕获法来处理事件false 【推荐】采用冒泡法来处理事件 let div1 docu…...

webpack5基础--14_优化css

Css 处理 提取 Css 成单独文件 Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式 这样对于网站来说,会出现闪屏现象,用户体验不好 我们应该是单独的 Css 文件,通过 link 标签加载…...

Skywalking(9.7.0) 告警配置

图片被吞,来这里看吧:https://juejin.cn/post/7344567669893021736 过年前一天发版,大家高高兴兴准备回家过年去了。这时候老板说了一句,记得带上电脑,关注用户反馈。有紧急问题在高速上都得给我找个服务区改好。 但是…...

删除、创建、验证Kafka安装自带的__consumer_offsets topic

删除Kafka自带Topic 一般情况下,你删除Kafka自带的__consumer_offsets topic,会报错提示不能删除。 倔强的你直接找到zookeeper删掉了它,list查看确实没有这个topic了,但是这会导致消费者和偏移量无法记录。 创建Kafka自带的Topi…...

在文件夹下快速创建vue项目搭建vue框架详细步骤

一、首先在你的电脑目录下新建一个文件夹 进入该文件夹并打开控制台(输入cmd指令) 进入控制台后输入 vue create springboot_vue (自己指定名称) 如果出现这类报错如:npm install 的报错npm ERR! network request to http://registry.cnp…...

蓝桥杯倒计时 36天-DFS练习

文章目录 飞机降落仙境诅咒小怂爱水洼串变换 飞机降落 思路&#xff1a;贪心暴搜。 #include<bits/stdc.h>using namespace std; const int N 10; int t,n; //这题 N 比较小&#xff0c;可以用暴力搜搜复杂度是 TN*N! struct plane{int t,d,l; }p[N]; bool vis[N];//用…...

ctfshow web入门 php特性总结

1.web89 intval函数的利用&#xff0c;intval函数获取变量的整数值&#xff0c;失败时返回0&#xff0c;空的数组返回&#xff0c;非空数组返回1 num[]1 intval ( mixed $var [, int $base 10 ] ) : int Note: 如果 base 是 0&#xff0c;通过检测 var 的格式来决定使用的进…...

Media Encoder 2024:未来媒体编码的新纪元 mac/win版

随着科技的飞速发展&#xff0c;媒体内容已成为我们日常生活中不可或缺的一部分。为了满足用户对高质量视频内容不断增长的需求&#xff0c;Media Encoder 2024应运而生&#xff0c;它凭借卓越的技术和创新的特性&#xff0c;重塑了媒体编码的未来。 Media Encoder 2024 mac/w…...

2024年AI辅助研发趋势:数智时代革新新引擎

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到我们生活的方方面面&#xff0c;而在软件开发领域&#xff0c;AI辅助研发正成为一股不可忽视的力量。本文将探讨2024年AI辅助研发的趋势&#xff0c;以及它如何成为数智时代革新的新引擎。 AI辅助研…...

2024年家政预约上门服务小程序【用户端+商家端+师傅端】源码

024最新家政预约上门服务小程序源码 主要功能:商家入住&#xff0c;师傅入住&#xff0c;缴纳保正金 支持师傅&#xff0c;抢单派单 支持多城市多门下单&#xff0c;支持预约上门服务到店核销 支持补差价义价&#xff0c;支持区域服务限制 基于thinkphp和原生小程序开发...

数据结构:静态链表(编程技巧)

链表的元素用数组存储&#xff0c; 用数组的下标模拟指针。 一、理解 如果有些程序设计语言没有指针类型&#xff0c;如何实现链表&#xff1f; 在使用指针类型实现链表时&#xff0c;我们很容易就可以直接在内存中新建一块地址用于创建下一个结点&#xff0c;在逻辑上&#x…...

python中的**可以表示什么??

在Python中&#xff0c;** 有两个主要的用途&#xff1a; 作为幂运算符&#xff1a;a ** b 表示a的b次方。例如&#xff0c;2 ** 3 会返回 8&#xff0c;因为2的3次方等于8。 在函数调用或定义时作为关键字参数的解包&#xff1a; 当你有一个字典&#xff0c;并且你想将这个字…...

使用 Git 跟踪项目文件

本章内容为&#xff1a;用Django 写学习笔记程序第三章.2部署程序摘录&#xff0c;详情内容查看请跳转下方链接&#xff1a; 用Django 写学习笔记程序第三章.2部署程序 文章目录 使用 Git 跟踪项目文件虚拟环境中安装 gitgit 是什么git 安装完成后的简单配置创建项目忽略文件初…...

C++从零开始(day47)——set,map学习使用

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的是关于set和map的知识点 1.关联式容器 在前面&#…...

手机和电脑同步的好用记事本软件有哪些

我常常需要随手记录各种信息&#xff0c;以便随时查阅和使用。比如&#xff0c;在下班路上&#xff0c;我会用手机记录明天要处理的工作事项、购物清单&#xff0c;或是某个突然迸发的创意想法&#xff1b;而在办公室&#xff0c;我则需要在电脑上整理会议纪要、项目计划&#…...

使用CSS制作动态的环形图/饼图

使用纯 CSS Animation conic-gradient 实现一个环形图。 饼图的实现思路和环形图一样&#xff0c;去掉中间的圆形遮盖 after 伪类元素即可。 一、构建基础样式 构建圆形节点和中间的遮盖元素。 <style>body {background-color: rgb(130, 226, 255);}.circle {top: 16…...

掌握React中的useEffect:函数组件中的魔法钩子

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

WPF 窗口添加投影效果Effect

BlurRadius&#xff1a;阴影半径 Color&#xff1a;颜色 Direction&#xff1a;投影方向 ShadowDepth&#xff1a;投影的深度 <Window.Effect><DropShadowEffect BlurRadius"10" Color"#FF858484" Direction"300" ShadowDepth&quo…...

Gitlab CICD 下载artifacts文件并用allure打开,或bat文件打开

allure命令行打开aritfacts报告 首先下载allure.zip&#xff0c;并解压 配置环境变量 使用命令行打开allure文件夹 allure open 2024-03-11-14-54-40 2024-03-11-14-54-40 包含index.html Bat文件打开artifacts There are 2 html reports in the download artifacts.zip S…...

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:NavRouter)

导航组件&#xff0c;默认提供点击响应处理&#xff0c;不需要开发者自定义点击事件逻辑。 说明&#xff1a; 该组件从API Version 9开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 必须包含两个子组件&#xff0c;其中第二个子组…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...