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

前端学习-事件解绑，mouseover和mouseenter的区别(二十九)

news 2026/5/18 11:04:07

目录

前言

解绑事件

语法

鼠标经过事件的区别

鼠标经过事件

示例代码

两种注册事件的区别

总结

前言

人道洛阳花似锦，偏我来时不逢春

解绑事件

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的区别(二十九)

目录 前言 解绑事件 语法 鼠标经过事件的区别 鼠标经过事件 示例代码 两种注册事件的区别 总结 前言 人道洛阳花似锦&#xff0c;偏我来时不逢春 解绑事件 on事件方式&#xff0c;直接使用null覆盖就可以实现事件的解绑 语法 btn.onclick function(){alert(点击了…...

编程日记 2025/2/2 12:38:57

独立游戏RPG回顾:高成本

刚看了某纪录片&#xff0c; 内容是rpg项目的回顾。也是这个以钱为核心话题的系列的最后一集。 对这期特别有代入感&#xff0c;因为主角是曾经的同事&#xff0c;曾经在某天晚上听过其项目组的争论。 对其这些年的起伏特别的能体会。 主角是制作人&#xff0c;在访谈中透露这…...

编程日记 2025/2/2 12:35:54

10.4 LangChain核心架构揭秘：模块化设计如何重塑大模型应用开发？

LangChain核心架构揭秘：模块化设计如何重塑大模型应用开发？ 关键词： LangChain模块化设计、大模型开发框架、LangChain核心概念、AI应用开发、LLM工程化 一、LangChain的模块化设计哲学：从“手工作坊”到“工业化生产” 传统开发痛点： 代码重复：每个项目从零开始编写胶…...

编程日记 2025/2/2 12:34:53

【学习笔记】深度学习网络-正则化方法

作者选择了由 Ian Goodfellow、Yoshua Bengio 和 Aaron Courville 三位大佬撰写的《Deep Learning》(人工智能领域的经典教程&#xff0c;深度学习领域研究生必读教材),开始深度学习领域学习&#xff0c;深入全面的理解深度学习的理论知识。 在之前的文章中介绍了深度学习中用…...

编程日记 2025/2/2 12:29:48

网站快速收录：如何优化网站头部与底部信息？

本文转自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/46.html 为了加快网站的收录速度&#xff0c;优化网站头部与底部信息是关键一环。以下是一些具体的优化建议&#xff1a; 网站头部信息优化 标题标签&#xff08;TitleTag&#xff09;优化…...

编程日记 2025/2/2 12:28:47

网络测试工具

工具介绍&#xff1a; 这是一个功能完整的网络测速工具&#xff0c;可以测试网络的下载速度、上传速度和延迟。 功能特点&#xff1a; 1. 速度测试 - 下载速度测试 - 上传速度测试 - Ping延迟测试 - 自动选择最佳服务器 2. 实时显示 - 进度条显示测试进度 - 实时显示测试状…...

编程日记 2025/2/2 12:24:39

使用HttpClient和HttpRequest发送HTTP请求

项目中经常会用到向第三方系统发送请求来传递数据或者获得信息&#xff0c;一般用的比较多的为HttpClient 和 HttpRequest&#xff0c;这里简要总结一下 HttpClient 和 HttpRequest 的用法 一、HttpClient 1. 发送get请求 public static String get(String url, Map<Stri…...

编程日记 2025/2/2 12:21:35

软件工程概论试题五

一、多选 1.好的软件的基本属性包括()。 A. 效率 B. 可依赖性和信息安全性 C. 可维护性 D.可接受性 正答&#xff1a;ABCD 2.软件工程的三要素是什么()? A. 结构化 B. 工具 C.面向对象 D.数据流! E.方法 F.过程 正答&#xff1a;BEF 3.下面中英文术语对照哪些是正确的、且是属…...

编程日记 2025/2/2 12:13:28

填充每个节点的下一个右侧节点指针力扣--116，117

目录 题目 思路 代码 题目 116 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node { int val; Node *left; Node *right; Node *next; } 填充它的每个 next 指针&#xff0c…...

编程日记 2025/2/2 12:10:24

DBUtils中QueryRunner(空参，传数据源)构造方法的区别及应用场景

关于学习Spring框架时重构DAO层时&#xff0c;遇到的QueryRunner构造方法的问题&#xff0c;回忆MySQL中DBUtils部分 1. 空参构造方法 new QueryRunner() 特点&#xff1a; 不绑定数据源&#xff1a;QueryRunner 实例内部没有 DataSource&#xff0c;因此无法自动获取连接。 …...

编程日记 2025/2/2 12:08:21

STM32 TIM输入捕获 测量频率

输入捕获简介&#xff1a; IC&#xff08;Input Capture&#xff09;输入捕获 输入捕获模式下&#xff0c;当通道输入引脚出现指定电平跳变时&#xff0c;当前CNT的值将被锁存到CCR中&#xff0c;可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器…...

编程日记 2025/2/2 12:06:19

Autosar-以太网是怎么运行的？（Davinci配置部分）

写在前面&#xff1a; 入行一段时间了&#xff0c;基于个人理解整理一些东西&#xff0c;如有错误&#xff0c;欢迎各位大佬评论区指正&#xff01;&#xff01;&#xff01; 目录 1.Autosar ETH通讯软件架构 2.Ethernet MCAL配置 2.1配置对应Pin属性 2.2配置TXD引脚 2.3配…...

编程日记 2025/2/2 12:02:15

16.[前端开发]Day16-HTML+CSS阶段练习(网易云音乐五)

完整代码 网易云-main-left-rank&#xff08;排行榜&#xff09; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name&q…...

编程日记 2025/2/2 12:00:13

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…...

编程日记 2025/2/2 11:55:07

Java-数据结构-优先级队列(堆)

一、优先级队列 ① 什么是优先级队列&#xff1f; 在此之前&#xff0c;我们已经学习过了"队列"的相关知识&#xff0c;我们知道"队列"是一种"先进先出"的数据结构&#xff0c;我们还学习过"栈"&#xff0c;是"后进先出"的…...

编程日记 2025/2/2 11:52:05

C++实现状态模式

首先上代码&#xff1a; #include <iostream> #include <memory>class Context;class State { public:virtual void Handle(Context * context) 0; //纯虚函数virtual ~State() default; //虚析构函数 };//创建状态A class ConcreateStateA : public State{…...

编程日记 2025/2/2 11:46:59

FreeRTOS学习笔记2：FreeRTOS的基础知识

1.FreeRTOS介绍 FreeRTOS是一个免费的嵌入式实时操作系统&#xff0c;同时它在市面上也是一款主流的操作系统&#xff0c;是工作上必不可少的技能。它具有以下六种特点&#xff1a; 1.免费开源&#xff1a;在商业产品中使用&#xff0c;无潜在商业风险&#xff0c;无需担心。 2…...

编程日记 2025/2/2 11:45:58

计算机网络之计算机网络的分类

计算机网络可以根据不同的角度进行分类&#xff0c;以下是几种常见的分类方式&#xff1a; 1. 按照规模和范围&#xff1a; 局域网&#xff08;LAN&#xff0c;Local Area Network&#xff09;&#xff1a;覆盖较小范围&#xff08;例如一个建筑物或校园&#xff09;&#xf…...

编程日记 2025/2/2 11:44:57

从理论到实践：Linux 进程替换与 exec 系列函数

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言&#xff1a; 在Linux中&#xff0c;进程替换&#xff08;Process Substitution&#xff09;是一个非常强大的特性&#xff0c;它允许将一个进程的输出直接当作一个文件来处理。这种技术通常用于Shell脚本和命令行操作中…...

编程日记 2025/2/2 11:40:53

Flutter常用Widget小部件

小部件Widget是一个类&#xff0c;按照继承方式&#xff0c;分为无状态的StatelessWidget和有状态的StatefulWidget。 这里先创建一个简单的无状态的Text小部件。 Text文本Widget 文件&#xff1a;lib/app/app.dart。 import package:flutter/material.dart;class App exte…...

编程日记 2025/2/2 11:37:48

一文读懂大模型Agent工作流：小白也能学会的AI新玩法（收藏版）

本文深入解析了AI Agent和Agent工作流的核心概念&#xff0c;阐述了AI代理如何通过工作流实现复杂任务的自动化。文章详细介绍了AI Agent的组成部分&#xff0c;包括推理、工具和记忆&#xff0c;并解释了Agent工作流的组成要素和不同模式。此外&#xff0c;还探讨了Agent工作流…...

编程新知 2026/5/18 10:48:21

Go语言开源漏洞扫描器Abyss-Scanner：架构解析与CI/CD集成实践

1. 项目概述&#xff1a;一个为安全而生的开源漏洞扫描器最近在整理自己的开源项目工具箱&#xff0c;发现一个挺有意思的工具&#xff0c;叫 Abyss-Scanner。这名字起得挺有深意&#xff0c;“深渊扫描器”&#xff0c;听起来就有点探索未知、发现潜在风险的味道。简单来说&am…...

编程新知 2026/5/17 10:12:09

荣品RV1126 SDK编译避坑指南：从环境配置到分区调整，手把手解决常见编译错误

RV1126 SDK编译实战&#xff1a;从环境搭建到分区优化的全流程解决方案 1. 开发环境配置与初始化 RV1126开发环境的搭建是整个开发流程的第一步&#xff0c;也是后续所有工作的基础。一个稳定、高效的开发环境能够显著提升开发效率&#xff0c;减少不必要的错误。 首先需要确保…...

编程新知 2026/5/17 9:26:55

告别黑盒：5分钟为你的自定义CNN模型集成Grad-CAM可视化（附常见错误排查）

告别黑盒&#xff1a;5分钟为你的自定义CNN模型集成Grad-CAM可视化&#xff08;附常见错误排查&#xff09; 在深度学习项目中&#xff0c;我们常常陷入一个尴尬境地&#xff1a;模型准确率很高&#xff0c;但完全不知道它究竟"看"了图像的哪些部分做出决策。这种黑盒…...

编程新知 2026/5/18 9:19:31

AICoverGen终极指南：5分钟用AI制作专业级翻唱歌曲

AICoverGen终极指南&#xff1a;5分钟用AI制作专业级翻唱歌曲 【免费下载链接】AICoverGen A WebUI to create song covers with any RVC v2 trained AI voice from YouTube videos or audio files. 项目地址: https://gitcode.com/gh_mirrors/ai/AICoverGen 想不想让AI…...

编程新知 2026/5/18 10:48:39

终极指南：3步实现PotPlayer实时字幕翻译，外语视频无障碍观看

终极指南&#xff1a;3步实现PotPlayer实时字幕翻译&#xff0c;外语视频无障碍观看 【免费下载链接】PotPlayer_Subtitle_Translate_Baidu PotPlayer 字幕在线翻译插件 - 百度平台 项目地址: https://gitcode.com/gh_mirrors/po/PotPlayer_Subtitle_Translate_Baidu 还…...

编程新知 2026/5/17 7:47:53

DeepSeek LeetCode 2421. 好路径的数目 Python3实现

给你 Python3 版本的代码&#xff0c;思路和之前的 Java 实现一致&#xff1a; 完整代码 python class Solution: def numberOfGoodPaths(self, vals: List[int], edges: List[List[int]]) -> int: n len(vals) # 1. 构建邻接表 gr…...

编程新知 2026/5/17 7:40:09

All in Token，移动，电信，联通，百度，阿里，字节，华为，Token战争，Token无用：李彦宏用DAA终结了AI的度量衡之争

今年4月&#xff0c;AI行业出现了一组让投资人坐立难安的数据&#xff1a;Anthropic年化营收突破300亿美元&#xff0c;正式超过OpenAI的约250亿美元。但反常的是&#xff0c;据第三方机构估算&#xff0c;Claude的月活用户仅约为ChatGPT的2.44%。以及&#xff0c;Anthropic的模…...

编程新知 2026/5/17 7:19:21

LLM应用快速演示框架：从架构解析到智能体开发的实战指南

1. 项目概述&#xff1a;一个面向开发者的LLM应用快速演示框架最近在GitHub上闲逛&#xff0c;发现了一个名为wronai/llm-demo的项目&#xff0c;点进去一看&#xff0c;瞬间觉得眼前一亮。这可不是又一个简单的“Hello World”式的大语言模型调用示例&#xff0c;而是一个结构…...

编程新知 2026/5/18 8:36:19

基于Helm Chart的JupyterHub生产级部署与运维实战指南

1. 项目概述&#xff1a;为什么我们需要一个可扩展的JupyterHub部署方案&#xff1f;如果你在团队里负责过数据科学或机器学习平台的搭建&#xff0c;大概率会为Jupyter Notebook的部署和管理头疼过。单个Jupyter Notebook服务给一两个人用还行&#xff0c;一旦团队规模扩大到十…...

编程新知 2026/5/18 8:02:30