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

WebAPIs 第二天

DOM事件基础

  • 事件监听
  • 事件类型
  • 事件对象

 一.事件监听

① 概念:就是让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出响应,也成为绑定事件或者注册事件

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

③ 事件监听三要素:

  (1)事件源:哪个DOM元素被事件触发了,要获取dom元素

  (2)事件类型:用什么方式触发,比如鼠标单击click, 鼠标经过 mouseover等

  (3)事件调用的函数:要做什么事

④ 注意:

  • 事件类型要加引号
  • 函数是触发一次就执行一次
const btn = document.querySelector('button')btn.addEventListener('click', function() {alert('你好呀')
})

⑤ 事件监听版本(拓展)

  • DOM L0    

    事件源.on事件 = function(){}

  • DOM L2

    事件源.addEventListenner(事件,事件处理函数)

  • 区别

    on 方式会被覆盖,addEventListenner 方式可绑定多次,拥有事件更多特性,推荐使用

二.事件类型

① 鼠标事件:鼠标触发

  • click 鼠标点击
  • mouseenter 鼠标经过
  • mouseleave 鼠标离开
const div = document.querySelector('div')
// 鼠标经过
div.addEventListener('mouseenter', function () {console.log('hello')
})
// 鼠标离开
div.addEventListener('mouseleave', function () {console.log('走了')
})

② 焦点事件:表单获得光标

  • focus 获得焦点
  • blur 失去焦点
 // 获得焦点和失去焦点
const input = document.querySelector('input')
input.addEventListener('focus', function () {console.log('获得焦点')
})input.addEventListener('blur', function () {console.log('失去焦点')
})

③ 键盘事件:键盘触发

  • keydown 键盘按下触发
  • keyup 键盘抬起触发
const input = document.querySelector('input')
input.addEventListener('keydown', function () {console.log('键盘按下')
})
input.addEventListener('keyup', function () {console.log('键盘弹起')
})

④ 文本事件:表单输入触发

  • input 用户输入事件
const input = document.querySelector('input')
input.addEventListener('input', function () {console.log(input.value)
})

 三.事件对象

 1.获取事件对象

 2.事件对象常用属性

3.1 获取事件对象

① 事件对象概念

  • 也是个对象,这个对象有事件触发时的相关信息

② 使用场景

  • 可以判断用户按下哪个键或者点击了哪个元素

③ 如何获取

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event,ev, e

 ④ 语法

元素.addEventListener('click', function(e) {
})

3.2 事件对象属性

  • type      获取当前的事件类型
  • clientX/clientY    获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY   获取光标相对于DOM元素左上角的位置
  • key     用户按下的键盘键的值(不推荐)

四.环境对象 

  • 环境对象:指的是函数内部特殊的变量this,代表当前函数运行时所处的环境
  • 作用:弄清楚this的指向,可以使代码更加简洁
  • 函数的调用方式不同,this指代的对象也不同
  • 【粗略规则】谁调用this就指向谁

五.回调函数

① 概念:如果将函数A作为参数传递给函数B时,将函数A称为回调函数

② 使用匿名函数作为回调函数比较常见

相关文章:

WebAPIs 第二天

DOM事件基础 事件监听事件类型事件对象 一.事件监听 ① 概念:就是让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数做出响应,也成为绑定事件或者注册事件 ② 语法:元素对象.addEventListener(事件类型&…...

解决macOS执行fastboot找不到设备的问题

背景 最近准备给我的备用机Redmi Note 11 5G刷个类原生的三方ROM,MIUI实在是用腻了。搜罗了一番,在XDA上找到了一个基于Pixel Experience开发的ROM:PixelExperience Plus for Redmi Note 11T/11S 5G/11 5G/POCO M4 Pro 5G (everpal)&#xf…...

Linux命令 -- chmod

Linux命令 -- chmod 参数含义权限说明修改文件权限修改目录权限 参数含义 文件用户 u 文件所有者g 文件所有者同组的用户o 其它用户a 所有用户 文件权限 r 读权限(对应数值4)w 写权限(对应数值2)x 执行权限(对应数…...

国产超低功耗32位MCU的应用

随着物联网技术的不断发展,超低功耗MCU已经成为了物联网方案中主要的芯片处理技术。超低功耗MCU具有众多的优点,其中一大所用就是能够大大提高物联网设备的续航能力,保证设备在长时间内不掉电不断电。那么,超低功耗MCU在物联网方案…...

将数组(矩阵)旋转根据指定的旋转角度scipy库的rotate方法

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 将数组(矩阵)旋转 根据指定的旋转角度 scipy库的rotate方法 关于下列代码说法正确的是? import numpy as np from scipy.ndimage import rotate a np.array([[1,2,3,4], …...

MFC创建和使用OCX控件

文章目录 MFC建立OCX控件注册OCX控件与反注册使用Internet Explorer测试ocx控件OCX控件添加方法OCX控件添加事件Web使用OCX控件MFC使用OCX控件使用OCX控件调用ocx的功能函数对ocx的事件响应OCX控件调试工具tstcon32.exe加载ocx控件使用tstcon32.exe调试ocxMFC建立OCX控件 新建…...

【设计模式】抽象工厂模式

抽象工厂模式(Abstract Factory Pattern)是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在抽象工厂模式中,接口是负责创建一个相关对象…...

小白带你学习linux的Redis3.2集群(三十三)

目录 一、Redis主从复制 1、概念 2、作用 3、缺点 4、流程 5、搭建 6、验证 二、Reids哨兵模式 1、概念 2、作用 3、缺点 4、结构 5、搭建 6、验证 三、Redis集群 1、概述 2、原理 3、架构细节 4、选举过程 四、搭建 1、第一步现在外部使用finalshell 9.9…...

嵌入式技术,就在你的手边!

嵌入式技术,听起来多么高大上的名词,同时它也确实是当今信息技术的前沿领域,但这并不意味着它就距离我们很遥远。 事实恰恰相反,在当今科技发展迅猛的时代,嵌入式技术成为了人们生活中不可或缺的一部分。它以其小巧、高…...

nodejs+vue+elementui健康饮食美食菜谱分享网站系统

本系统采用了nodejs语言的vue框架,数据采用MySQL数据库进行存储。结合B/S结构进行开发设计,功能强大,界面化操作便于上手。本系统具有良好的易用性和安全性,系统功能齐全,可以满足饮食分享管理的相关工作。 语言 node.…...

input 设置type=“number“,鼠标悬停关闭提示语

一、问题 最近刚发现input 设置type"number"之后,鼠标悬停会出现提示语:请输入有效值。两个最接近的有效值分别为xx和xx。想要输入的值确实为number格式,又可以输入小数,不限制小数位,所以要把这讨厌的提示去…...

CSDN互利共赢玩法实战!!!

csdn项目第一波基本都顺利跑了起来,我们总计找来了一两千个新的项目源码,来让大家变现。 在实战中,主要两个玩法,一个引流,一个付费资源。付费资源门槛越来越高,所以我们这一波升级完成的号,就非…...

java.sql.SQLFeatureNotSupportedException 问题及可能的解决方法

目录 问题 分析: 解决方法 问题 java.sql.SQLFeatureNotSupportedException 分析: 可能是你的 druid的maven依赖版本太低了,我的以前是1.1.16,就出现了异常! 解决方法 把druid的maven依赖版本调高! 运…...

如何在 .NET Core WebApi 中处理 MultipartFormDataContent 中的文件

问题描述# 上图示例展示了用户通过 IOS 客户端发送请求时,对应后端接口接收到的 Request 内容。从请求内容的整体结果,我们可以看出这是一个 multipart/form-data 的数据格式,由于这种数据是由多个 multipart section 组成,所以我…...

【智力悬疑题】——【“找凶手”解法】

“找凶手”题目解法 “案件题目”💻 某地发生了一起凶杀案,警察通过排查确定杀人凶手必为4个嫌疑犯中的一个。以下为4个嫌疑犯的供词: A说:不是我。 B说:是C。 C说:是D。 D说:C在胡说。 已知3个…...

【论文阅读】基于深度学习的时序异常检测——TimesNet

系列文章链接 参考数据集讲解:数据基础:多维时序数据集简介 论文一:2022 Anomaly Transformer:异常分数预测 论文二:2022 TransAD:异常分数预测 论文三:2023 TimesNet:基于卷积的多任…...

P3741 honoka的键盘

题目背景 honoka 有一个只有两个键的键盘。 题目描述 一天,她打出了一个只有这两个字符的字符串。当这个字符串里含有 VK 这个字符串的时候,honoka 就特别喜欢这个字符串。所以,她想改变至多一个字符(或者不做任何改变&#xf…...

编写第一个 React Native 程序

React Native 目录 使用React Native CLI命令创建的目录如下图所示: 重要目录说明 目录说明__tests__存放测试用例的目录.bundle / config配置文件(一般不会用到)android 和 IOS 文件夹这两个文件夹主要是存放安卓和 ios 相关的配置文件和…...

AI:03-基于深度神经网络的低空无人机目标检测图像识别的研究

文章目录 数据集收集与预处理深度神经网络模型设计模型训练与优化目标检测与图像识别代码实现:实验结果与分析讨论与展望低空无人机的广泛应用为许多领域带来了巨大的潜力和机会。为了实现无人机的自主导航和任务执行,准确的目标检测和图像识别是至关重要的。本文旨在研究并提…...

Arcgis将一个shp依照属性表导出为多个shp

# -*- coding:utf-8 -*-import arcpy import osfrom arcpy import env#env.workspace "./" #自己设置路径shp rC:\Users\Administrator\Desktop\Lake\xxx.shp #shp文件路径outpath r"C:\Users\Administrator\Desktop\Lake\fenli" #输出结果路径with arc…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中,各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过,在涉及到多个子类派生于基类进行多态模拟的场景下,…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

【Linux系统】Linux环境变量:系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...