JavaScript(17)——事件监听

什么是事件?

事件是在编程时系统内发生的动作或发生的事情,比如用户在网页上单击一个按钮

什么是事件监听?

就是让程序检测是否有事件产生,一旦有事件触发,就立刻调用一个函数做出响应,也称为绑定事件或注册事件

语法:

元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素:

  • 事件源: 哪个dom元素被事件触发了,要获取dom元素
  • 事件类型:用什么方式触发,比如鼠标单击click,鼠标经过mouseover等
  • 事件调用的函数:要做什么事

示例:点击按钮弹出对话框

<body><button>点我</button><script>const but = document.querySelector('button')but.addEventListener('click', function () { alert('点我啦') })</script>
</body>

 点击关闭之后,盒子关闭

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

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

相关文章

【Javascript】前端面试基础2【每日学习并更新10】

模块化开发是怎样做的&#xff1f; 立即执行函数&#xff0c;不暴露私有成员 异步加载JS的方式有哪些 那些操作会造成内存泄漏 是什么&#xff1a;内存泄漏指任何对象在您不再拥有或需要它之后仍然存在造成内存泄漏&#xff1a; setTimeout的第一个参数使用字符串而非函数的…

认识漏洞-GitLab 远程命令执行漏洞、致远OA-ajax.do未授权任意文件上传漏洞

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 [GitLab 远程命令执行漏洞复现(CVE-2021-22205)](https://mp.weixin.qq.com/s/4QT-vxKpBn4ppNM9ipt-nQ)02 [致远OA-ajax.do未授权任意文件上传Getshell](https://mp.weixin.qq.com/s/TH2A5J5TXU36Y…

使用Claude 3.5 Sonnet和Stable Diffusion XL:如何通过Amazon Bedrock不断优化图像生成直到满足需求

在Amazon Bedrock的AI模型中&#xff0c;Anthropic Claude 3系列现在新增了图像识别功能。特别是最新的Anthropic Claude 3.5 Sonnet&#xff0c;图像识别能力得到了显著提升。我进行了一些简单的试验和比较&#xff0c;深入探索了这些Claude模型在OCR&#xff08;光学字符识别…

HarmonyOS和OpenHarmony区别联系

前言 相信我们在刚开始接触鸿蒙开发的时候经常看到HarmonyOS和OpenHarmony频繁的出现在文章和文档之中&#xff0c;那么这两个名词分别是什么意思&#xff0c;他们之间又有什么联系呢&#xff1f;本文将通过现有的文章和网站内容并与Google的AOSP和Android做对比&#xff0c;带…

【Django】开源前端库bootstrap,常用

文章目录 下载bootstrap源文件到本地项目引入bootstrap文件 官网&#xff1a;https://www.bootcss.com/V4版本入口&#xff1a;https://v4.bootcss.com/V5版本入口&#xff1a;https://v5.bootcss.com/ 这里使用成熟的V4版本&#xff0c;中文文档地址&#xff1a;https://v4.b…

SSM学习9:SpringBoot简介、创建项目、配置文件、多环节配置

简介 SpringBoot式用来简化Spring应用的初始搭建以及开发过程的一个框架 项目搭建 File -> New -> Project 选中pom.xml文件&#xff0c;设置为maven项目 项目启动成功 可以访问BasicController中的路径 配置文件 在resources目录下 application.properties 默…

CSP-J1 2022 入门级第一轮错题

CSP-J1 2022 入门级第一轮 假设字母表{a,b,c,d,e}在字符串出现的频率分别为10%,15%,30%,16%,29%。若使用哈夫曼编码方式对字母进行不定长的二进制编码&#xff0c;字母d的编码长度为(B)位。 A. 1 B. 2 C. 2 或 3 D. 3 一棵有n个结点的完全二叉树用数组进行存储与表示&#xf…

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…

el-table表格 及其el-pagination分页 封装及其使用

1、首页在components文件夹中新建table文件夹 table文件夹下table.vue全部代码&#xff1a; <template><el-table:stripe"stripe":row-key"handlerRowKey()":tree-props"treeProps":border"border":show-summary"showS…

fiddler的安装

fiddler的安装 1、下载fiddler的安装包 1.1 打开网页 https://www.telerik.com/fiddler1.2找到安装包 1.3下载安装包 2、安装fiddler 2.1双击安装包&#xff0c;弹出安装界面框 3、显示这种就是安装成功 4、如果你报以下的错误&#xff0c;请继续跟教程&#xff0c;不报错不…

Prometheus各类监控及监控指标和告警规则

目录 linux docker监控 linux 系统进程监控 linux 系统os监控 windows 系统os监控 配置文件&告警规则 Prometheus配置文件 node_alert.rules docker_container.rules mysql_alert.rules vmware.rules Alertmanager告警规则 consoul注册服务 Dashboard JSON…

LeetCode-25 -两两交换链表中的节点

力扣24题 题目描述&#xff1a; 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 **题解思路&#xff1a;**递归&#xff0c;确…

vue3使用递归组件渲染层级结构

先看看是不是你想要的&#xff1a; 当有层级去渲染的时候&#xff0c;嵌套的层级不明确&#xff0c;这时只能通过递归组件去渲染。 数据如下&#xff1a; 通过判断subCatalog这个字段的长度是否大于0来确定是否有下级。 上代码&#xff1a;(代码是使用uniapp开发的&#xff0…

利用Python爬取天气数据并实现数据可视化

为了使用Python爬取天气数据并实现数据可视化&#xff0c;我们可以选择几个流行的数据源&#xff0c;比如OpenWeatherMap API&#xff0c;这是一个提供实时和历史天气数据的API。以下是一个简单的步骤指南&#xff0c;包括如何使用Python请求天气数据&#xff0c;并使用Matplot…

Oracle系统表空间的加解密

实验环境 数据库选择的是orclpdb1&#xff0c;当前系统表空间未加密&#xff1a; SQL> show con_nameCON_NAME ------------------------------ ORCLPDB1SQL> select TABLESPACE_NAME, STATUS, ENCRYPTED from dba_tablespaces;TABLESPACE_NAME STATUS …

LeetCode Hot100 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

栈和队列的相关练习

用队列实现栈 首先引用上一篇博客中的队列的相关操作 typedef int QDatatype; typedef struct QueueNode {QDatatype data;struct QueueNode* next; }QueueNode;typedef struct Queue {QueueNode* head;QueueNode* tail;int size; }Queue;void QueueInit(Queue* pq) {assert(p…

《Java初阶数据结构》----3.<线性表---LinkedList与链表>

目录 前言 一、链表的简介 1.1链表的概念 1.2链表的八种结构 重点掌握两种 1.3单链表的常见方法 三、单链表的模拟实现 四、LinkedList的模拟实现&#xff08;双链表&#xff09; 4.1 什么是LinkedList 4.2LinkedList的使用 五、ArrayList和LinkedList的区别 前言 …

机器学习(五) -- 无监督学习(1) --聚类1

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;7&#xff09; --SVM2 下篇&#xff1a;机器学习&#xff08;五&#xff09; -- 无监督学习&#xff08;1&#xff09; --聚类2 前言 tips&#xff1a;标题前有“***”的内容…

Python 教程(四):Python运算符合集

目录 专栏列表前言1. 算术运算符2. 比较运算符3. 逻辑运算符4. 位运算符5. 赋值运算符6. 成员运算符7. 身份运算符总结 在前三篇教程中&#xff0c;我们学习了 Python 的基本语法和数据结构以及字符串的特性。本篇教程&#xff0c;我们将深入探讨 Python 中的运算符合集。 专栏…