前端学习-事件解绑,mouseover和mouseenter的区别(二十九)
目录
前言
解绑事件
语法
鼠标经过事件的区别
鼠标经过事件
示例代码
两种注册事件的区别
总结
前言
人道洛阳花似锦,偏我来时不逢春
解绑事件
on事件方式,直接使用null覆盖就可以实现事件的解绑
语法
btn.onclick = function(){alert('点击了')
}
btn.onclick = null;const ben = document.querySelector('button');ben.addEventListener('click', function fn() {console.log('click');})ben.removeEventListener('click', fn);
注意:匿名函数无法被解绑
鼠标经过事件的区别
鼠标经过事件
mouseover和mouseout会有冒泡效果
mouseenter和mouseleave没有冒泡效果(推荐)
示例代码
<!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>.dad {width: 200px;height: 200px;background-color: red;}
.son {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><button id="myButton">点击</button><div class="dad"><div class="son"></div></div><script>const ben = document.querySelector('#myButton');const dad = document.querySelector('.dad');const son = document.querySelector('.son');
// 定义命名函数function handleClick() {console.log('click');}
function handleMouseOver() {console.log('over');}
function handleMouseOut() {console.log('out');}
// 添加事件监听器ben.addEventListener('click', handleClick);dad.addEventListener('mouseenter', handleMouseOver);dad.addEventListener('mouseleave', handleMouseOut);
// 示例:在按钮点击后移除事件监听器ben.addEventListener('click', function () {ben.removeEventListener('click', handleClick);dad.removeEventListener('mouseenter', handleMouseOver);dad.removeEventListener('mouseleave', handleMouseOut);console.log('事件已解绑');});</script>
</body>
</html>
两种注册事件的区别
传统on注册(L0)
同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖就可以实现事件的解绑
都是冒泡阶段执行的事件
监听注册(L2)
语法: addEventListener(事件类型,事件处理函数,是否使用捕获)
后面注册的事件不会覆盖前面注册的事件(同一个事件)
可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
匿名函数无法被解绑
总结
春风得意马蹄疾,一日观尽长安花
相关文章:
前端学习-事件解绑,mouseover和mouseenter的区别(二十九)
目录 前言 解绑事件 语法 鼠标经过事件的区别 鼠标经过事件 示例代码 两种注册事件的区别 总结 前言 人道洛阳花似锦,偏我来时不逢春 解绑事件 on事件方式,直接使用null覆盖就可以实现事件的解绑 语法 btn.onclick function(){alert(点击了…...
独立游戏RPG回顾:高成本
刚看了某纪录片, 内容是rpg项目的回顾。也是这个以钱为核心话题的系列的最后一集。 对这期特别有代入感,因为主角是曾经的同事,曾经在某天晚上听过其项目组的争论。 对其这些年的起伏特别的能体会。 主角是制作人,在访谈中透露这…...
10.4 LangChain核心架构揭秘:模块化设计如何重塑大模型应用开发?
LangChain核心架构揭秘:模块化设计如何重塑大模型应用开发? 关键词: LangChain模块化设计、大模型开发框架、LangChain核心概念、AI应用开发、LLM工程化 一、LangChain的模块化设计哲学:从“手工作坊”到“工业化生产” 传统开发痛点: 代码重复:每个项目从零开始编写胶…...
【学习笔记】深度学习网络-正则化方法
作者选择了由 Ian Goodfellow、Yoshua Bengio 和 Aaron Courville 三位大佬撰写的《Deep Learning》(人工智能领域的经典教程,深度学习领域研究生必读教材),开始深度学习领域学习,深入全面的理解深度学习的理论知识。 在之前的文章中介绍了深度学习中用…...
网站快速收录:如何优化网站头部与底部信息?
本文转自:百万收录网 原文链接:https://www.baiwanshoulu.com/46.html 为了加快网站的收录速度,优化网站头部与底部信息是关键一环。以下是一些具体的优化建议: 网站头部信息优化 标题标签(TitleTag)优化…...
网络测试工具
工具介绍: 这是一个功能完整的网络测速工具,可以测试网络的下载速度、上传速度和延迟。 功能特点: 1. 速度测试 - 下载速度测试 - 上传速度测试 - Ping延迟测试 - 自动选择最佳服务器 2. 实时显示 - 进度条显示测试进度 - 实时显示测试状…...
使用HttpClient和HttpRequest发送HTTP请求
项目中经常会用到向第三方系统发送请求来传递数据或者获得信息,一般用的比较多的为HttpClient 和 HttpRequest,这里简要总结一下 HttpClient 和 HttpRequest 的用法 一、HttpClient 1. 发送get请求 public static String get(String url, Map<Stri…...
软件工程概论试题五
一、多选 1.好的软件的基本属性包括()。 A. 效率 B. 可依赖性和信息安全性 C. 可维护性 D.可接受性 正答:ABCD 2.软件工程的三要素是什么()? A. 结构化 B. 工具 C.面向对象 D.数据流! E.方法 F.过程 正答:BEF 3.下面中英文术语对照哪些是正确的、且是属…...
填充每个节点的下一个右侧节点指针力扣--116,117
目录 题目 思路 代码 题目 116 给定一个 完美二叉树 ,其所有叶子节点都在同一层,每个父节点都有两个子节点。二叉树定义如下: struct Node { int val; Node *left; Node *right; Node *next; } 填充它的每个 next 指针,…...
DBUtils中QueryRunner(空参,传数据源)构造方法的区别及应用场景
关于学习Spring框架时重构DAO层时,遇到的QueryRunner构造方法的问题,回忆MySQL中DBUtils部分 1. 空参构造方法 new QueryRunner() 特点: 不绑定数据源:QueryRunner 实例内部没有 DataSource,因此无法自动获取连接。 …...
STM32 TIM输入捕获 测量频率
输入捕获简介: IC(Input Capture)输入捕获 输入捕获模式下,当通道输入引脚出现指定电平跳变时,当前CNT的值将被锁存到CCR中,可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器…...
Autosar-以太网是怎么运行的?(Davinci配置部分)
写在前面: 入行一段时间了,基于个人理解整理一些东西,如有错误,欢迎各位大佬评论区指正!!! 目录 1.Autosar ETH通讯软件架构 2.Ethernet MCAL配置 2.1配置对应Pin属性 2.2配置TXD引脚 2.3配…...
16.[前端开发]Day16-HTML+CSS阶段练习(网易云音乐五)
完整代码 网易云-main-left-rank(排行榜) <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&q…...
langchain 实现多智能体多轮对话
这里写目录标题 工具定义模型选择graph节点函数定义graph 运行 工具定义 import random from typing import Annotated, Literalfrom langchain_core.tools import tool from langchain_core.tools.base import InjectedToolCallId from langgraph.prebuilt import InjectedSt…...
Java-数据结构-优先级队列(堆)
一、优先级队列 ① 什么是优先级队列? 在此之前,我们已经学习过了"队列"的相关知识,我们知道"队列"是一种"先进先出"的数据结构,我们还学习过"栈",是"后进先出"的…...
C++实现状态模式
首先上代码: #include <iostream> #include <memory>class Context;class State { public:virtual void Handle(Context * context) 0; //纯虚函数virtual ~State() default; //虚析构函数 };//创建状态A class ConcreateStateA : public State{…...
FreeRTOS学习笔记2:FreeRTOS的基础知识
1.FreeRTOS介绍 FreeRTOS是一个免费的嵌入式实时操作系统,同时它在市面上也是一款主流的操作系统,是工作上必不可少的技能。它具有以下六种特点: 1.免费开源:在商业产品中使用,无潜在商业风险,无需担心。 2…...
计算机网络之计算机网络的分类
计算机网络可以根据不同的角度进行分类,以下是几种常见的分类方式: 1. 按照规模和范围: 局域网(LAN,Local Area Network):覆盖较小范围(例如一个建筑物或校园)…...
从理论到实践:Linux 进程替换与 exec 系列函数
个人主页:chian-ocean 文章专栏-Linux 前言: 在Linux中,进程替换(Process Substitution)是一个非常强大的特性,它允许将一个进程的输出直接当作一个文件来处理。这种技术通常用于Shell脚本和命令行操作中…...
Flutter常用Widget小部件
小部件Widget是一个类,按照继承方式,分为无状态的StatelessWidget和有状态的StatefulWidget。 这里先创建一个简单的无状态的Text小部件。 Text文本Widget 文件:lib/app/app.dart。 import package:flutter/material.dart;class App exte…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
