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

JS的监听事件

在JavaScript中,你可以使用监听器来捕获和处理不同类型的事件。通过添加事件监听器,你可以指定当特定事件发生时要执行的函数。

以下是几种常见的监听事件的方法:

        1. addEventListener():用于在目标元素上添加事件监听器。它接受三个参数:事件类型要执行的回调函数、和一个可选的布尔值参数,用于指定事件是否在捕获阶段触发(默认为false,即在冒泡阶段触发)。例如:

document.addEventListener("click", function(event) { console.log("Click event occurred."); });

       2.onclick:直接将函数赋值给一个元素的onclick属性,以响应点击事件。例如:

button.onclick = function() { console.log("Button clicked."); };

        3.其他事件监听方法:除了以上两种方法,还有许多特定的事件监听方法,如onmouseoveronkeydown等。这些方法是DOM对象的属性,可以通过直接赋值函数来进行事件监听。例如:

element.onmouseover = function() { console.log("Mouse over event occurred."); };

     

  注意:如果使用addEventListener()方法添加了多个相同类型的事件监听器,它们将按照添加的顺序依次执行。而当使用属性赋值或其他方法替换事件监听器时,之前添加的监听器可能会被覆盖。

相关文章:

JS的监听事件

在JavaScript中,你可以使用监听器来捕获和处理不同类型的事件。通过添加事件监听器,你可以指定当特定事件发生时要执行的函数。 以下是几种常见的监听事件的方法: 1. addEventListener():用于在目标元素上添加事件监听器。它接受…...

JS Object.values()

一、官方定义 返回一个给定对象的自有可枚举字符串键属性值组成的数组 二、语法 Object.values(obj)参数 obj 被返回可枚举属性值的对象。返回值 一个包含对象自身的所有可枚举属性值的数组。描述 Object.values() 返回一个数组,其元素是在对象上找到的可枚举…...

基于Java SSM人力资源管理系统

人力资源管理系统实现对企业人力资源的科学管理。企业有多个部门,每个部门有——名经理和多名员工,公司设置多级岗位,对应不同薪酬标准,员工日常工作进行考勤,岗位变动需要进行登记。系统管理的对象及操作主要有&#…...

人工智能和程序员

一、介绍人工智能和程序员 人工智能(AI)是一种模拟人类智能的计算机系统,其目的是让计算机具备类似人类的学习、推理、规划和理解能力。人工智能致力于创建能够感知、适应环境并作出决策的智能体,以解决各种复杂的问题。程序员是…...

Unity优化篇:对于unity DrawCall/Mesh/纹理压缩/内存等方面的常规调试和优化手段

对于Unity的DrawCall、Mesh、纹理压缩、内存等方面的常规调试和优化手段,我都有一定的了解。以下是一些常见的优化手段: 减少DrawCall:这是提高性能的关键。尽可能合并相同的材质和纹理,使用LOD(Levels of Detail&…...

学生信息管理系统

摘 要 学生成绩管理系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。经过分析,我们使用Microsoft公司的C语言开发工具,将与C语言技术与数据库SQL2008相结合进行设计。首先,…...

纯代码压缩WordPress前端Html

易于阅读的前端代码对开发而言是无比重要的,但对于浏览器来说就显得无比鸡肋了,毕竟浏览器不是像人眼一样看代码,过多的换行和空格,对前台加载是有一定影响的,对使用大带宽高配置服务器的网站,这么点影响可…...

Elasticsearch分词器--空格分词器(whitespace analyzer)

介绍 文本分析,是将全文本转换为一系列单词的过程,也叫分词。analysis是通过analyzer(分词器)来实现的,可以使用Elasticearch内置的分词器,也可以自己去定制一些分词器。除了在数据写入时将词条进行转换,那么在查询的时…...

【LeetCode】692. 前K个高频单词

692. 前K个高频单词 描述示例解题思路及事项思路一思路二 描述 给定一个单词列表 words 和一个整数 k ,返回前 k 个出现次数最多的单词。 返回的答案应该按单词出现频率由高到低排序。如果不同的单词有相同出现频率, 按字典顺序 排序 示例 示例1 输…...

在Windows操作系统上使用rtsp simple server和ffmpeg推送录屏视频流

大纲 1 搭建启动rtsp server2 推送录屏视频流下载FFmpeg 3 检验3.1 获取本机IP3.2 检测 1 搭建启动rtsp server 从https://github.com/aler9/rtsp-simple-server/releases下载Windows版本的编译结果。 解压,然后启动该程序 2 推送录屏视频流 下载FFmpeg 从htt…...

互联网摸鱼日报(2023-12-05)

互联网摸鱼日报(2023-12-05) 36氪新闻 魔珐科技创始人兼CEO柴金祥:3D虚拟人原生产品,正在押注时代的“最大红利”| WISE2023商业之王大会 上市就来割韭菜?数十家在审企业也有“掏空式分红”之嫌,此前多家企业已惹众怒 历史新高…...

Android 项目的依赖方式

四种依赖方式 在 Android 项目中,有多种方式可以添加项目依赖。以下是几种常见的方式: Gradle 依赖:这是最常用和推荐的方式。在项目的 build.gradle 文件中,你可以使用 dependencies 块来添加依赖项。Gradle 会自动从远程仓库下…...

ArcGIS提取DEM中的山脉范围

已知数据:DEM文件ASTGTM_N00E118E.img 使用软件:ArcMap 要求:对数据进行操作,提取数据文件中的山脉范围 下面开始操作: 1、 打开ArcMap将DEM文件ASTGTM_N00E118E.img添加到数据框。 2、 接下来我们打开spatial ana…...

漏洞复现--万户ezoffice wpsservlet任意文件上传

免责声明: 文章中涉及的漏洞均已修复,敏感信息均已做打码处理,文章仅做经验分享用途,切勿当真,未授权的攻击属于非法行为!文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…...

TCPDUMP抓包明确显示IP地址和端口号

经常使用tcpdump进行抓包的同学可以忽略了,这篇偏于使用扫盲;首先,tcpdump抓包目的IP显示为hostname,如果端口是知名端口,显示为协议名而不是端口号。这种默认其实略有问题的: 如果我们使用默认的hostname…...

java FTP客户端获取文件流假死问题

依赖 hutool FTP配置 inspection.data.ftp.host172.26.1.41 inspection.data.ftp.port21 inspection.data.ftp.user6c inspection.data.ftp.password6cqq123 inspection.data.ftp.charsetNameGBK FTP配置类 import lombok.Data; import org.springframework.boot.context.pr…...

python使用记录

1、VSCode添加多个python解释器 只需要将对应的python.exe的目录,添加到系统环境变量的Path中即可,VSCode会自动识别及添加 2、pip 使用 pip常用命令和一些坑 查看已安装库的版本号 pip show 库名称 通过git 仓库安装第三方库 pip install git仓库地…...

【Vulnhub 靶场】【Coffee Addicts: 1】【简单-中等】【20210520】

1、环境介绍 靶场介绍:https://www.vulnhub.com/entry/coffee-addicts-1,699/ 靶场下载:https://download.vulnhub.com/coffeeaddicts/coffeeaddicts.ova 靶场难度:简单 - 中等 发布日期:2021年5月20日 文件大小:1.3 …...

codeforces每日两道思维题(第 二 天)

第二天 1 B. Same Parity Summands 原题链接:Problem - 1352B - Codeforces rating : 1200 题目描述: 给定两个正整数 n(1≤n≤10^9)和 k(1≤k≤100)。将数字 n 表示为 k 个相同奇偶性的正整数之和&…...

【网络安全】-常见的网站攻击方式详解

文章目录 介绍1. SQL 注入攻击攻击原理攻击目的防范措施 2. 跨站脚本攻击(XSS)攻击原理攻击目的防范措施 3. CSRF 攻击攻击原理攻击目的防范措施 4. 文件上传漏洞攻击原理攻击目的防范措施 5. 点击劫持攻击原理攻击目的防范措施 结论 介绍 在数字时代&a…...

Llama-3.2V-11B-cot应用场景:跨境电商多语言商品图信息提取案例

Llama-3.2V-11B-cot应用场景:跨境电商多语言商品图信息提取案例 1. 项目背景与价值 跨境电商平台每天需要处理海量商品图片,传统人工标注方式面临三大痛点: 语言障碍:商品图可能包含多种语言的文字信息效率瓶颈:人工…...

从按键消抖到I2C通信:深入浅出聊聊MCU上拉/下拉电阻与开漏输出的那些坑

从按键消抖到I2C通信:深入浅出聊聊MCU上拉/下拉电阻与开漏输出的那些坑 在嵌入式系统开发中,GPIO配置看似简单,却暗藏玄机。记得第一次调试I2C总线时,通信速率始终上不去,最后发现竟是上拉电阻选型不当;另一…...

如何高效配置Unity插件框架:BepInEx完整实战指南

如何高效配置Unity插件框架:BepInEx完整实战指南 【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx BepInEx是一款专为Unity游戏设计的插件框架和补丁工具,能够…...

Phi-4-Reasoning-Vision应用场景:法律文书配图证据链推理系统

Phi-4-Reasoning-Vision应用场景:法律文书配图证据链推理系统 1. 法律文书配图证据链推理系统概述 在法律实务中,证据链的构建往往需要处理大量图文混合材料。传统人工分析方式存在效率低下、主观性强、容易遗漏细节等问题。基于Phi-4-Reasoning-Visio…...

5分钟打造私人语音助手:开源离线语音键盘Sayboard全解析

5分钟打造私人语音助手:开源离线语音键盘Sayboard全解析 【免费下载链接】Sayboard An open-source on-device voice IME (keyboard) for Android using the Vosk library. 项目地址: https://gitcode.com/gh_mirrors/sa/Sayboard 在智能手机普及的今天&…...

PromptTemplate和ChatPromptTemplate的区别是什么呢?

我用最简单、最直白、一看就懂的方式给你讲清楚: PromptTemplate 和 ChatPromptTemplate 的真正区别 一句话总结 PromptTemplate 生成一段普通字符串 给补全模型/简单模型用ChatPromptTemplate 生成一整段聊天对话格式 给**聊天模型(ChatGLM、Qwen、GP…...

RT-Thread Nano 3.0.3移植STM32F103后,第一个实战:用FinSH组件实现串口命令行调试

RT-Thread Nano 3.0.3移植STM32F103实战:FinSH组件实现串口命令行调试 当你成功将RT-Thread Nano移植到STM32F103开发板后,第一个令人兴奋的里程碑就是让系统真正"活"起来——而FinSH组件正是实现这一目标的完美起点。这个内置的命令行交互工具…...

Qwen3.5-4B-Claude-Opus应用场景:技术博客选题生成、文章大纲结构化输出

Qwen3.5-4B-Claude-Opus应用场景:技术博客选题生成与文章大纲结构化输出 1. 模型概述与核心能力 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B的推理蒸馏模型,特别强化了结构化分析和逻辑推理能力。这个经过优化的版本以GGUF…...

Surface硬盘不够用?教你用cfadisk把SD卡变本地硬盘(附详细图文)

Surface硬盘扩容实战:用cfadisk将SD卡完美变身本地存储 每次打开Surface的存储设置,看到那根触目惊心的红色容量条,相信不少用户都会感到焦虑。作为微软旗下最受欢迎的移动生产力工具,Surface系列在便携性和性能上表现出色&#x…...

OpenClaw+GLM-4.7-Flash:智能爬虫与数据分析

OpenClawGLM-4.7-Flash:智能爬虫与数据分析 1. 为什么需要智能爬虫与数据分析 最近我在做一个小型竞品分析项目时,遇到了一个典型的数据收集困境:需要从20多个竞品网站抓取产品功能描述、定价策略和用户评价,然后整理成结构化数…...