当前位置: 首页 > 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…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

C# SqlSugar:依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...