38 事件

1.1  键盘事件及对象

  • onkeydown:只要按下任意键,就会触发一次

  • onkeypress:生成一个字符时触发,最常用

  • //键盘事件对象 document.onkeypress = function(evt){ // console.log(evt); //录入的字符 console.log(evt.key); //录入的ASC码值 var keyAsc = evt.keyCode || evt.which || evt.charCode; // console.log(evt.keyCode); // console.log(evt.which); // console.log(evt.charCode); // 65 97 13 32 48 10 // A a 回车 空格 0 ctrl+回车 console.log(keyAsc); if(keyAsc == 10){ console.log("发送"); } //ctrlKey:判断ctrl是否被按下 console.log(evt.ctrlKey); }

1.2  事件的绑定方式

  • 1.通过HTML元素绑定

    • <button οnclick="f1()">点击1</button>

  • 2.通过JS对象绑定

    • <button id="btn">点击2</button><br> var oBtn = document.querySelector("#btn");

  • 以上绑定的缺陷:

    • 1.无法为相同的元素绑定相同的事件

    • 2.无法决定事件流是捕获还是冒泡

    • 解决方案

      • 3.事件的监听

        • 优点

          • 1.可以为相同的元素绑定相同的事件

          • 可以决定事件流是捕获还是冒泡

        • 事件元素

          • addEventListener("去掉on的事件名",回调函数,是否捕获true | 默认false)

          • 先捕获后冒泡

1.3  事件的解绑

  • 1.js对象的解绑

    • var oBtns = document.querySelectorAll("button"); oBtns[0].onclick = function(){ alert(111); } oBtns[1].onclick = function(){ oBtns[0].onclick = null; }

  • 2.事件监听的解绑

    • removeEventListener("去掉on的事件","同一个回调函数");

1.4  事件的委托

  • 委托:你的事情让别人干

  • 事件的委托:子元素被触发后,事件体由父元素去执行--》依赖于冒泡机制

  • 好处1:可以将批量绑定的子元素事件,委托到父元素的事件,从而提高程序的执行效率

  • 好处2:可以为未来添加子元素,提前绑定事件

1.5  拖拽

  • onmousedown

    • box

  • onmousemove

    • document

  • onmouseup

    • document

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

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

相关文章

[Flutter3] 记录Dio的简单封装(一)

文章目录 效果使用ResponseEntity类DioManager封装_onResponse / _onDioException 的设计Response的处理catch处理 效果 请求成功/失败/异常的日志输出效果 成功: 失败:500 失败:404 网络异常: 使用 举个使用的例子, 在调用 DioManager的时候, 直接通过返回值的状态, 来…

Qt 把.exe打包成安装文件形式

目录 1.下载工具 Qt Installer Framework2.将bin文件添加到环境变量3.拷贝startmenu示例-备用4.准备Qt Release打包好的程序5.把Release打包好的程序放到packages\org.qtproject.ifw.example\data文件夹下6.生成安装包7.修改安装包图标8.修改主程序程序安装引导-创建快捷键9.添…

Linux---自定义协议

应用层协议 一、协议定制---以网络计算器为例 网络计算机功能---进行-*/^&|的运算并返回结果 请求和响应的结构体如下 // Protocol.hpp #pragma once #include <iostream> #include <memory> class Request { public:Request(){}Request(int data_x, int da…

苹果AI终于来了!从2.7到30亿四款大模型代码全开源,AI技术持续“狂飙”|钛媒体AGI

&#xff08;图片来源&#xff1a;Apple官网&#xff09; 苹果公司突然公布了一则大新闻。 北京时间4月25日凌晨&#xff0c;苹果在 Hugging Face 平台上发布一个“具有开源训练和推理框架的高效语言模型”&#xff0c;名为 OpenELM。 据了解&#xff0c;OpenELM有四种尺寸&…

Magnet for Mac:高效窗口管理工具

Magnet for Mac是一款专为Mac用户设计的窗口管理工具&#xff0c;旨在帮助用户更高效地管理和布局多个应用程序窗口&#xff0c;提升工作效率。 Magnet for Mac v2.14.0中文免激活版下载 这款软件拥有直观易用的界面和丰富的功能&#xff0c;支持用户将屏幕分割成多个区域&…

Linux操作系统的安装与配置

目录 (1)实验目的&#xff1a; (2)实验内容&#xff1a; (3)实验原理&#xff1a; (4)实验步骤&#xff1a; 1.先下载vmware workstation pro软件&#xff0c;下载地址:https://www.vmware.com/products/workstation-pr o/workstation-pro-evaluation.html 2.下载完成后&…

A41 STM32_HAL库函数 之 Rtc通用驱动 所有函数的介绍及使用

A41 STM32_HAL库函数 之 Rtc通用驱动 所有函数的介绍及使用 1 该驱动函数预览1.1 HAL_RTC_Init1.2 HAL_RTC_DeInit1.3 HAL_RTC_MspInit1.4 HAL_RTC_MspDeInit1.5 HAL_RTC_SetTime1.6 HAL_RTC_GetTime1.7 HAL_RTC_SetDate1.8 HAL_RTC_GetDate1.9 HAL_RTC_SetAlarm1.10 HAL_RTC_S…

NumPy 1.26 中文官方指南(四)

附加文件 术语表 原文&#xff1a;numpy.org/doc/1.26/glossary.html (n,) 括号中跟着逗号的数字表示一个具有一个元素的元组。尾随逗号将一个元素元组与括号n区分开。 -1 在维度入口中&#xff0c;指示 NumPy 选择长度&#xff0c;以保持数组元素总数不变。 >>> n…

vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记

1 找到属性标签添加 lazy 和 :load"loadNode" 这两个属性 2 引入树形接口,并和后端约定好传值,(拿我的举例 第一次获取全部父级默认第一次传参数:{ parentId : 0},可获取全部父级 第二次通过点击的子级把子级id传进去,这一步就用到了:load"loadNode&quo…

路由器使用docker安装mysql和redis服务

路由器使用docker安装mysql和redis服务 1.先在路由器中开启docker功能 &#xff08;需要u盘 或者 移动硬盘&#xff09; 2. docker 管理地址 :http://192.168.0.1:11180/#/ 3. 拉取镜像 4. mysql容器参数设置 MYSQL_ROOT_PASSWORD 5. redis 容器设置 开发经常需要用到 &…

Synchronized关键字的深入分析

一、引言 在多线程编程中&#xff0c;正确地管理并发是确保程序正确运行的关键。Java提供了多种同步工具&#xff0c;其中synchronized关键字是最基本且最常用的同步机制之一。本文旨在深入解析synchronized的实现原理&#xff0c;探讨其在不同应用场景中的使用&#xff0c;并…

(ChatGPT中文、吾爱Al、核桃、WeexAl地址发布页、ai创作、Chat中文)分享好用的ChatGPT

目录 1、ChatGPT 中文 - Chat GPT 2、吾爱AI 3、 核桃 4、WeexAI 地址发布页 5、ai创作

​解析什么是物联网接入网关?-天拓四方

随着物联网技术的飞速发展&#xff0c;越来越多的设备、传感器和系统被连接到互联网&#xff0c;形成了一个庞大的、相互连接的智能网络。在这个网络中&#xff0c;物联网接入网关扮演着至关重要的角色&#xff0c;它不仅是连接物联网设备和云平台的桥梁&#xff0c;还是实现设…

数据结构-二叉树-堆(二)

一、建堆的时间复杂度问题 1、除了向上调整建堆&#xff0c;我们还可以向下调整建堆。不能在根上直接开始向下调整。这里的条件就是左右子树必须都是大堆或者小堆。我们可以倒着往前走&#xff0c;可以从最后一个叶子开始调整。但是从叶子开始调整没有意义。所以我们可以从倒数…

【华为OD机试】5G网络建设【C卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 现需要在某城市进行5G网络建设,已经选取N个地点设置5G基站,编号固定为1到N, 接下来需要各个基站之间使用光纤进行连接以确保基站能互联互通,不同基站之间假设光纤的成本各不相同,且有…

mysql的多表查询和子查询

多表查询&#xff1a;查询数据时&#xff0c;需要使用多张表来查询 多表查询分类&#xff1a; 1.内连接查询 2.外连接查询 3.子查询 笛卡尔积&#xff1a; create table class (id int primary key auto_increment,name varchar(10) ); create table student (id int primar…

serdes 同轴电缆和双绞线接法

1、同轴电缆 Coaxial Cable 2、双绞线STP&#xff08;Shielded Twisted Pair&#xff09; 比如我们用的车载camera一般就只需要接一路即可&#xff0c;RIN接camera&#xff0c; RIN-通过电容接地。

python基础——正则表达式

&#x1f4dd;前言&#xff1a; 这篇文章主要想讲解一下python中的正则表达式&#xff1a; 1&#xff0c;什么是正则表达式 2&#xff0c;re模块三匹配 3&#xff0c;元字符匹配 4&#xff0c;具体示例 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&am…

qt中的取整函数

在Qt中&#xff0c;有以下几种常用的取整函数&#xff0c;用于处理浮点数的取整操作&#xff1a; 1. **qCeil()** - 向上取整&#xff1a; 该函数返回大于或等于给定浮点数的最小整数。如果输入值是正数&#xff0c;它会将小数部分去掉并增加到下一个整数&#xff1b;如果是…

重新理解React-hook

Hook是什么 Hook是React16.8版本新增的特性,它可以让我们在不写类组件的情况下使用state以及其他的React特性。 它解决了以下这些问题: 逻辑复杂的组件难以开发和维护,当我们的组件需要处理多个互不相关的local state时,每个生命周期函数中可能包含着各种互相关的逻辑类组…