JavaScript(17)——事件监听

news2024/9/8 12:30:47

什么是事件?

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

什么是事件监听?

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

语法:

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

事件监听三要素:

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

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

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

 点击关闭之后,盒子关闭

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

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

相关文章

【Linux】进程IO|系统调用|open|write|文件描述符fd|封装|理解一切皆文件

目录 ​编辑 前言 系统调用 open 参数flags 参数mode write 追加方式 read close 文件描述符 打开多个文件并观察其文件描述符 C语言文件操作 理解一切皆文件 理解open操作 前言 各类语言的文件操作其实是对系统调用的封装 我们经常说&#xff0c;创建一个文件&a…

【 C++ 】 一文搞定——引用、内联、命名空间、缺省、重载

前言&#xff1a;这篇文章将带您了解C基础中的知识点——命名空间、引用、内联、缺省、重载 &#x1f618;我的主页&#xff1a;OMGmyhair-CSDN博客 一、命名空间namespace 1.可以嵌套定义&#xff0c;但是只能定义在全局 namespace ly {int student 1;int age 21;void Pr…

剑和沙盒 6 - 线程辱骂 – 使用线程名称进行攻击

强调&#xff1a; 进程注入是攻击者工具包中的重要技术之一。在下面的文章中 解释了如何滥用线程描述 API 来绕过端点保护产品。提出了一种新的注入技术&#xff1a;Thread Name-Calling&#xff0c;并给出了实施保护的相关建议。 介绍 进程注入是攻击者使用的重要技术之一 。…

Go-知识panic

Go-知识panic 1. 介绍2. 工作机制2.1 panic函数2.2 工作流程2.3 总结 3. 原理3.1 数据结构3.2 gopanic没有deferdefer函数处理嵌套defer 4. 总结 Go-知识error :https://blog.csdn.net/a18792721831/article/details/140430350 Go-知识defer : https://blog.csdn.net/a18792721…

单片机基于TXW8301的Wi-Fi Halow物联网控制

目前市面上基于2.4/5.8G wifi通讯信号干扰很频繁&#xff0c;基于Wi-Fi Halow的sub1g wifi既可以绕过干扰还可以达到公里级别控制&#xff0c;并且实现高清图传非常方便。 什么是Wi-Fi Halow&#xff1f;有何优势&#xff1f; 早在2016年3月&#xff0c;Wi-Fi联盟就针对物联网…

YOLO v8目标检测(二)—v8理论与模型推理

YOLO v8目标检测 数据增强 使用场景&#xff1a;在数据加载器加载数据的过程中会使用到数据增强的相关方法&#xff0c;来构造数据集。模型推理方法进行学习之前首先复习了解图像数据增强的相关方法和步骤。 其中在v8的源代码中 augment.py 的源代码文件。它包含了几个用于数据…

【python】python基于 Q-learning 算法的迷宫游戏(源码+论文)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

java项目数据库 mysql 迁移到 达梦

目录 一、下载安装达梦数据库 1、下载 2、解压 3、安装 二、迁移 三、更改SpringBoot 的 yml文件 1、达梦创建用户 2、修改yml 一、下载安装达梦数据库 1、下载 下载地址 https://eco.dameng.com/download/ 点击下载 开发版 (X86平台) , 然后选择操作系统并点击立…

重装win10系统,“我们无法创建新的分区 也找不到现有的分区”“我们无法更新系统保留的分区”

重装系统&#xff0c;最开始用这篇教程保留数据的重装系统教程&#xff01;&#xff08;win10系统&#xff09;_win10重装系统保留c盘数据-CSDN博客里win10官方的更新方法。想保留C盘以外的数据来重装系统 然后就会提示“我们无法更新系统保留的分区” 查到网上说这是因为MSR分…

python基础巩固

基本数据类型 可以用isinstance来判断 a111 isinstance(a,int) True数值运算&#xff1a; >>> 2 / 4 # 除法&#xff0c;得到一个浮点数 0.5 >>> 2 // 4 # 除法&#xff0c;得到一个整数 0 >>> 17 % 3 # 取余 2Python 字符串不能被改变。向一个…

支持向量机 及其分类案例详解(附Python 代码)

支持向量机分类器预测收入等级 我们将构建一个支持向量机&#xff08;SVM&#xff09;分类器&#xff0c;以预测一个人基于14个属性的收入等级。我们的目标是判断收入是否高于或低于每年$50,000。因此&#xff0c;这是一个二元分类问题。我们将使用在此处可用的人口普查收入数…

MySQL数据库(基础篇)

&#x1f30f;个人博客主页&#xff1a;心.c 前言&#xff1a;今天讲解的是MySQL的详细知识点的&#xff0c;希望大家可以收货满满&#xff0c;话不多说&#xff0c;直接开始搞&#xff01; &#x1f525;&#x1f525;&#x1f525;文章专题&#xff1a;MySQL &#x1f63d;感…

语言转文字

因为工作原因需要将语音转化为文字&#xff0c;经常搜索终于找到一个免费的好用工具&#xff0c;记录下使用方法 安装Whisper 搜索Colaboratory 右上方链接服务 执行 !pip install githttps://github.com/openai/whisper.git !sudo apt update && sudo apt install f…

Arduino IDE界面和设置(基础知识)

Arduino IDE界面和设置&#xff08;基础知识&#xff09; 1-2 Arduino IDE界面和设置如何来正确选择Arduino开发板型号如何正确选择Arduino这个端口如何来保存一个Arduino程序Arduino ide 的界面功能按钮验证编译上传新建打开保存工作状态 1-2 Arduino IDE界面和设置 大家好这…

软设之数据库概念结构设计

集成的方法&#xff1a; 多个局部E-R图一次集成 逐步集成&#xff0c;用累加的方式一次集成两个局部E-R 集成产生的冲突及解决办法&#xff1a; 属性冲突&#xff1a;包括属性冲突和属性取值冲突 命名冲突&#xff1a;包括同名异义和异名同义 结构冲突&#xff1a;包括同…

react.16+

1、函数式组件 在vite脚手架中执行&#xff1a; app.jsx: import { useState } from react import reactLogo from ./assets/react.svg import viteLogo from /vite.svg import ./App.cssfunction App() {console.log(this)return <h2>我是函数式组件</h2> }exp…

如何通过注解注入一个自定义的FactoryBean

一、引入依赖二、定义一个注解三、创建一个FactoryBean四、创建一个BeanPostProcessor4.1 其他关联类AnnotationUtilsServiceBeanNameBuilder 五、注入InstantiationAwareBeanPostProcessor到IoC中5.1 实现ImportBeanDefinitionRegistrar接口5.2 通过Import注入 六、使用6.1 打…

【proteus经典项目实战】51单片机用计数器中断实现100以内的按键计数并播放音乐

一、简介 一个基于8051微控制器的计数器系统&#xff0c;该系统能够通过按键输入递增计数&#xff0c;并且能够在达到100时归零。该系统将使用计数器中断和外部中断来实现其功能。 51单片机因其简单易用和成本效益高&#xff0c;成为电子爱好者和学生的首选平台。通过编程单片…

猫头虎分享 || 最全Python的Scapy库基础知识点汇总

&#x1f431;‍&#x1f464; 猫头虎分享 || Python的Scapy库基础知识点汇总 摘要 Scapy 是一个强大的Python库&#xff0c;用于网络数据包的生成、解析和操作。通过Scapy&#xff0c;开发者可以轻松地创建自定义数据包&#xff0c;捕获网络流量&#xff0c;并执行网络扫描。…

算法日记day 22

一、二叉搜索树中的插入操作 题目&#xff1a; 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 value &#xff0c;将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。 输入数据 保证 &#xff0c;新值和原始二叉搜索树中的任意节点值都不同。…