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

js事件的详细介绍

news 文章来源：https://blog.csdn.net/qq_46372132/article/details/133045280 2024/11/5 13:33:57

11.事件

1.什么是事件

   js属于事件驱动编程,把'驱动',执行,调用通过一些交互,触发一些函数事件:发起-->执行绑定事件-->触发事件on 绑定 emit触发 off解绑

2.事件分类

鼠标事件

点击事件 onclick

双击事件 ondblclick

按下事件 onmousedown

抬起事件 onmouseup

鼠标进入事件 onmouseenter

鼠标离开事件 onmouseleave

onmouseleave,onmouseenter遇到子元素,不会触发

鼠标移动事件 onmousemove

鼠标进入事件 onmouseover

上面两个遇到了子元素,会触发

鼠标离开事件onmouseout

鼠标滚轮 onmousewheel

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: skyblue;}.inner{width: 100px;height: 100px;background-color: pink;}</style>
</head><body><div class="box"><div class="inner"></div></div><script>var box = document.querySelector(".box");// 1.单件事件 onclick// box.onclick = function () {//     alert(123)// }//  会覆盖前面的onclick事件box.onclick = function () {console.log("onclick");}// 鼠标点击盒子,就会触发, 就像onclick+(),执行// 2.双击box.ondblclick = function () {console.log("ondblclick");}// 3.鼠标按下 onmousedown先执行,再执行onclickbox.onmousedown = function () {console.log("onmousedown");}// 4.鼠标抬起onmousedown先执行,再执行onmouseup,最后onclickbox.onmouseup = function () {console.log("onmouseup");}// 5.鼠标滚动事件box.onmousewheel = function () {console.log("滚轮....onmousewheel");}// 6.鼠标进入box.onmouseenter = function () {console.log("onmouseenter 鼠标进入");}// 7.鼠标离开box.onmouseleave = function () {console.log("onmouseleave 鼠标离开");}// 8.鼠标进入box.onmouseover = function () {console.log("onmouseover 鼠标进入");}// 9.鼠标离开box.onmouseout = function () {console.log("onmouseout 鼠标离开");}// 1.// onmouseover 优先于onmouseenter// onmouseout优先于onmouseleave// 2.onmouseover 和onmouseout 遇到子元素也会触发// onmouseenter 和onmouseleave 遇到子元素不会触发// 10.鼠标移动box.onmousemove = function () {console.log("onmousemove 鼠标移动");}</script>
</body></html>

键盘事件

键盘按下 onkeydown 获取不到输入框的完整内容,能防止别人误输入

键盘抬起 onkeyup 输入完成 后抬起,抬起的时候,就能获取输入的内容

非功能键 onkeypress 非功能键有用

html事件

onload 页面加载 并且外部资源也加载完成后,触发

ounload 卸载

onresize改变窗口大小事件

onselect 文本框选中事件

onchange 文本框改变内容事件

oninput 文本框输入事件

onfocus 光标聚焦事件

onblur 失去焦点

onwheel滚轮事件

onerror错误事件

onscroll 滚动条事件

oncontextmenu 右击菜单事件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

表单**

onsubmit 提交

  • .会触发js onsubmit事件
  • return false;//阻止表单的默认行为,不让表单提交

onreset 重置

3.js的事件模式

内联模式(不推荐)

脚本模式(重点)

当一个元素上,绑定了内联模式与脚本模式时,脚本模式优先

4.事件对象

1.什么是事件对象

在交换时,产生一条记录对象

2.事件对象的默认写法

var e=evt||window.event;

window.event ie6+

evt google 重点掌握

3.事件对象的属性

 // button 监听按下了哪个键// type 事件的类型// charCode 字符编码// keyCode 按键编码// target 和srcElement// altKey// shiftKey// metaKey// clientX,clientY  客户// pageX,pageY      页面// screenX,screeY   屏幕// offsetX,offsetY  偏移// stopPropagation()//停止冒泡// cancelBubble=true//取消冒泡// preventDefault()//阻止默认行为// returnValue=false//阻止默认行为

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {height: 500%;}.box {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div><script>/* e.button  onmousedown 0左键 1 滚轮键 2 右键e.keyCode 没有小写 全是大写,13是回车键 37 38 39 40 左上右下e.key  //按键的字符e.clientX,e.clientY 鼠标点击的点,到当前浏览器的左上角的距离e.pageX,e.pageY 鼠标点击的点,到页面左上角的距离e.offsetX,e.offsetY 鼠标点击的点,到当前元素左上角的距离e.screenX,e.screenY 鼠标点击的点,到当前屏幕左上角的距离e.target e.srcElement 鼠标点击的目标元素,target不一定等于thise.type 事件的类型,返回值不带on,列如onclick--clicke.altKey 是否按下了shiftKeye.ctrlKey 是否按下了CtrlKeye.metaKey window(win键)*/window.onmousedown = function (evt) {var e = evt || window.event// console.log(e.button);//onmousedown 0左键 1 滚轮键 2 右键}window.onkeydown = function (evt) {var e = evt || window.event// 没有小写 全是大写,13是回车键 37 38 39 40 左上右下// console.log(e.keyCode);console.log(e.key);//按键的字符}var box = document.querySelector(".box")box.onclick = function (evt) {var e = evt || window.event;console.log(e.clientX, e.clientY);console.log(e.pageX, e.pageY);console.log(e.offsetX, e.offsetY);console.log(e.screenX, e.screenY);console.log(e.target, this);console.log(e.type);console.log(e.altKey);console.log(e.shiftKey);//按住shift 就返回true 否则falseconsole.log(e.ctrlKey);console.log(e.metaKey);}</script>
</body></html>

5.事件流

当元素叠到一起,点某一个元素,事件会传递

传递分为2个过程 冒泡和捕获

事件流有三个阶段 冒泡-目标-捕获

冒泡:从内到外传递事件

捕获 从外往内传递事件

6.事件的默认行为

  1. 表单,提交,重置行为
  2. a标签,跳转的行为
  3. 图片,拖拽的行为
  4. 右击菜单,显示菜单的行为

阻止默认行为

  1. return false 重点

  2. preventDefault()重点

  3. returnValue=false了解

  4. 兼容写法 了解

      if (e.preventDefault) {e.preventDefault();} else {e.returnValue = false;}

7.事件的监听

addEventListener(“事件类型”,函数,true/false)

capture 捕获

once 1次

addEventListener 默认是冒泡,就需要把第3个参数,设置true

addEventListener和removeEventListener的第3个参数,统一为true或false

8.三大家族

三大家族 "DOM"的属性,而offsetX,offsetY是"事件"对象的属性

​ offsetParent 找带有就近定位的父元素,如果父级们没有定位,默认找body 返回dom对象

​ offsetLeft,offsetTop 获取当前元素到带有定位父元素的距离,默认到body的距离 返回数值

​ offsetWidth offsetHeight 获取自身元素的宽与高=自身宽高+padding+border,就是不包含margin 返回数值

​ parentNode 找亲父元素(上一层)

​ offsetParent 找带有就近定位的父元素,如果父级们的没有定位,默认找body

9.案例盒子拖拽

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: green;/* 位置移动 */position: absolute;}</style>
</head><body><div class="box"></div><script>var box = document.querySelector(".box")// 给盒子绑定鼠标按下事件box.onmousedown = function (e) {// 获取拖动的点到盒子起始点的位置var disX = e.pageX - this.offsetLeftvar disY = e.pageY - this.offsetTop;// 在按下鼠标的同时,拖动盒子,绑定鼠标移动事件document.onmousemove = function (e) {box.style.left = e.pageX - disX + "px"box.style.top = e.pageY - disY + "px"}// 鼠标松开不移动 清空绑定的移动事件// 文档的任何位置松开document.onmouseup = function (e) {box.onmouseup = document.onmousemove = null}}</script>
</body></html>

相关文章：

js事件的详细介绍

11.事件 1.什么是事件 js属于事件驱动编程,把驱动,执行,调用通过一些交互,触发一些函数事件:发起-->执行绑定事件-->触发事件on 绑定 emit触发 off解绑2.事件分类 鼠标事件 点击事件 onclick 双击事件 ondblclick 按下事件 onmousedown 抬起事件 onmouseup 鼠标进…...

编程日记 2023/9/20 5:37:32

虚幻4学习笔记（12）操控导入的角色、动画蓝图、播放蒙太奇和打包、角色重定向

虚幻4学习笔记 操控导入的角色设置鼠标旋转关掉动态模糊 动画蓝图、播放蒙太奇和打包角色走路奔跑动画shift 奔跑F 跳舞移动打断 跳舞 打包角色重定向姿势调整解决跑步 腿分太开隐藏剑 B站UP谌嘉诚课程&#xff1a;https://www.bilibili.com/video/BV164411Y732 操控导入的角色…...

编程日记 2023/9/20 5:35:30

hive with tez:无法从链中的任何提供者加载aws凭据

环境信息 hadoop 3.1.0 hive-3.1.3 tez 0.9.1 问题描述 可以从hadoop命令行正确地访问s3a uri。我可以创建外部表和如下命令&#xff1a; create external table mytable(a string, b string) location s3a://mybucket/myfolder/; select * from mytable limit 20; 执行正…...

编程日记 2023/9/20 5:33:26

Ubuntu修改静态IP、网关和DNS的方法总结

Ubuntu修改静态IP、网关和DNS的方法总结 ubuntu系统&#xff08;其他debian的衍生版本好像也可以&#xff09;修改静态IP有以下几种方法。&#xff08;搜索总结&#xff0c;可能也不太对&#xff09; /etc/netplan (use) Ubuntu 18.04开始可以使用netplan配置网络&#xff0…...

编程日记 2023/9/20 5:32:25

Eureka服务器注册

一。Eureka服务器注册 1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://mav…...

编程日记 2023/9/20 5:29:23

Windows安装GPU版本的pytorch详细教程

文章目录 chatGLM2-6B安装教程正式安装 chatGLM2-6B ChatGLM2-6B版本要装pytorch2.0&#xff0c;而且要2.0.1 &#xff0c;因此CUDA不能用12.0 &#xff0c;也不能用10.0&#xff0c;只能用11.x 版本。 安装教程 pip install直接下载安装 官网&#xff1a; https://pytorch.…...

编程日记 2023/9/20 5:28:22

理解Kruskal算法的前提----深入理解并查集【超简单~】

并查集的实现思路 并查集主要分为两个部分&#xff1a;第一部分就是需要找到点对应的祖宗节点&#xff0c;第二部分&#xff0c;是要将属于同一个集合节点的祖宗节点进行统一&#xff0c;也就是结合操作。 Find函数实现 // parent数组用来存储下标值所对应的父节点值 // 比如…...

编程日记 2023/9/20 5:27:21

Jenkins+Gitee+Docker+Ruoyi项目前后端分离部署

前言 描述&#xff1a;本文主要是用来记录 如何用标题上的技术&#xff0c;部署到云服务器上通过ip正常访问。 一、总览 1.1、Docker做的事 拉取 mysql 镜像拉取 redis 镜像拉取 jdk 镜像拉取 nginx 镜像 解释说明&#xff1a;前端项目的打包文件放在 nginx容器运行。后端…...

编程日记 2023/9/20 5:25:19

笙默考试管理系统-MyExamTest----codemirror（23）

笙默考试管理系统-MyExamTest----codemirror&#xff08;23&#xff09; 目录 笙默考试管理系统-MyExamTest----codemirror&#xff08;23&#xff09; 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙…...

编程日记 2023/9/20 5:24:19

重学Java (一) 泛型

1. 前言 泛型编程自从 Java 5.0 中引入后已经超过15个年头了。对于现在的 Java 码农来说熟练使用泛型编程已经是家常便饭的事情了。所以本文就在不对泛型的基础使用在做说明了。 如果你还不会使用泛型的话&#xff0c;可以参考下面两个链接 Java 泛型详解The Java™ Tutorial…...

编程日记 2023/9/20 5:23:18

Docker 部署 Redis 服务

拉取最新版本的 Redis 镜像: $ sudo docker pull redis:latest在本地预先创建好 data 目录和 conf/redis.conf 文件。 使用以下命令来运行 Redis 容器: $ sudo docker run -itd --name redis --privilegedtrue -p 6379:6379 -v /home/ubuntu/docker/redis/data:/data -v /ho…...

编程日记 2023/9/20 5:22:17

阿里云产品试用系列-负载均衡 SLB

阿里云负载均衡&#xff08;Server Load Balancer&#xff0c;简称SLB&#xff09;是云原生时代应用高可用的基本要素。通过将流量分发到不同的后端服务来扩展应用系统的服务吞吐能力&#xff0c;消除单点故障并提升应用系统的可用性。阿里云SLB包含面向4层的网络型负载均衡NLB…...

编程日记 2023/9/20 5:21:16

drf 对象级权限

drf 对象级权限 Django REST Framework&#xff08;DRF&#xff09;提供了对象级别权限&#xff08;Object-level permissions&#xff09;来控制特定对象的访问权限。 简单来说&#xff1a;通过视图类中的self.get_object(pk)得到一个obj对象(视图对象)&#xff0c;在与requ…...

编程日记 2023/9/20 5:20:15

八大排序（二）--------冒泡排序

本专栏内容为&#xff1a;八大排序汇总 通过本专栏的深入学习&#xff0c;你可以了解并掌握八大排序以及相关的排序算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;八大排序汇总 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库…...

编程日记 2023/9/20 5:19:14

SmartSQL 一款开源的数据库文档管理工具

建议直接蓝奏云下载安装 蓝奏云下载&#xff1a;https://wwoc.lanzoum.com/b04dpvcxe 蓝奏云密码&#xff1a;123 项目介绍 SmartSQL 是一款方便、快捷的数据库文档查询、导出工具&#xff01;从最初仅支持 数据库、CHM文档格式开始&#xff0c;通过不断地探索开发、集思广…...

编程日记 2023/9/20 5:17:12

代码随想录算法训练营第56天 | ● 583. 两个字符串的删除操作 ● 72. 编辑距离 ● 动态规划之编辑距离总结篇

文章目录 前言一、583. 两个字符串的删除操作二、72. 编辑距离三、动态规划之编辑距离总结篇总结 前言 一、583. 两个字符串的删除操作 两种思路&#xff1a;1.直接动态规划&#xff0c;求两个字符串需要删除的最小次数 2.采用子序列的和-最长公共子序列。思路一分析如下&#…...

编程日记 2023/9/20 5:16:11

矩阵 m * M = c

文章目录 题1题2 题1 (2023江苏领航杯-prng) 题目来源&#xff1a;https://dexterjie.github.io/2023/09/12/%E8%B5%9B%E9%A2%98%E5%A4%8D%E7%8E%B0/2023%E9%A2%86%E8%88%AA%E6%9D%AF/ 题目描述&#xff1a; (没有原数据&#xff0c;自己生成的数据) from Crypto.Util.number…...

编程日记 2023/9/20 5:15:10

Linux——IO

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——文件系统 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;是不是只有C/C有文件操作呢&#xff1f;python&#xff0c;java&…...

编程日记 2023/9/20 5:14:09

svn(乌龟svn)和SVN-VS2022插件(visualsvn) 下载

下载地址: https://www.visualsvn.com/visualsvn/download/...

编程日记 2023/9/20 5:12:08

开源日报 0824 | 构建UI组件和页面的前端工作坊

Storybook 是一个用于构建 UI 组件和页面的前端工作坊&#xff0c;支持多种主流框架&#xff0c;提供丰富的插件&#xff0c;具有可配置性强和扩展性好的特点。 storybookjs/storybook Stars: 79.9k License: MIT Storybook 是一个用于构建 UI 组件和页面的前端工作坊&#x…...

编程日记 2023/9/20 5:11:07

福建三明大型工程机械3D扫描工程零件三维建模逆向抄数-CASAIM中科广电

高精度3D扫描技术已经在大型工件制造领域发挥着重要作用&#xff0c;可以高精度高效率实现全尺寸三维测量&#xff0c;本期&#xff0c;我们要分享的应用是大型工程机械3D扫描案例。 铣轮是深基础施工领域内工法先进、技术复杂程度高、高附加值的地连墙设备&#xff0c;具有成…...

编程日记 2023/9/20 5:10:06

使用香橙派学习 Linux的守护进程

Q&#xff1a;什么是守护进程 A&#xff1a;Linux Daemon&#xff08;守护进程&#xff09;是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行 某种任务或等待处理某些发生的事件。它不需要用户输入就能运行而且提供某种服务&#xff0c;不是对整个系统就是对某个…...

编程日记 2023/9/20 5:08:04

数据治理-数据仓库和商务智能

数据仓库的作用 减少数据冗余&#xff0c;提高信息一致性&#xff0c;让企业能够利用数据做出更优决策的方法&#xff0c;数据仓库是企业数据管理的核心。 业务驱动因素 运营支持职能、合规需求&#xff08;历史数据响应&#xff09;和商务智能活动&#xff08;主因&#xff1…...

编程日记 2023/9/20 5:07:03

CH2--x86系统架构概览

2.1 OVERVIEW OF THE SYSTEM-LEVEL ARCHITECTURE 图中的实线箭头表示线性地址&#xff0c;虚线表示段选择器&#xff0c;虚线箭头表示物理地址 2.1.1 Global and Local Descriptor Tables 全局描述符表 (GDT) GDT是一个全局的段描述符表&#xff0c;它存储在系统内存中的一个固…...

编程日记 2023/9/20 5:06:02

Immutable.js API 简介

Immutable-js 这个库的实现是深拷贝还是浅拷贝&#xff1f;immutable 来源immutable.js三大特性&#xff1a; 持久化数据结构结构共享惰性操作 Immutable.js 的几种数据类型 immutable 使用 使用 npm 安装 immutable&#xff1a; 常用API介绍 MapListList.isList() 和 Map.isMa…...

编程日记 2023/9/20 5:04:01

HLSL 入门(一)

HLSL High Level Shader Language 高级着色语言&#xff0c;是Direct3D中用来编写Shader的语言。其语法类似于C语言。 虽然其主要作用是用来编写例如顶点着色器&#xff0c;像素着色器。但本质是对图形并行管线进行编程&#xff0c;因此也能用来编写用于计算的着色器&#xff…...

编程日记 2023/9/20 5:02:59

【Docker】挂载数据卷

一、Docker数据卷说明及操作 在Docker中挂载数据卷是一种将数据持久化保存的方法&#xff0c;以便容器之间或容器与主机之间共享数据。以下是如何在Docker中挂载数据卷的步骤&#xff1a; 1、创建数据卷 首先&#xff0c;您需要创建一个数据卷。可以使用以下命令创建一个数据卷…...

编程日记 2023/9/20 5:00:57

[技术干货]spring 和spring boot区别

Spring 和 Spring Boot 都是 Java 框架&#xff0c;用于构建企业级应用程序。Spring 是一个完整的框架&#xff0c;提供各种功能&#xff0c;包括依赖注入、事务管理、数据访问、Web 开发等。Spring Boot 是一个基于 Spring 的框架&#xff0c;旨在简化 Spring 应用程序的开发和…...

编程日记 2023/9/20 4:59:56

【hudi】数据湖客户端运维工具Hudi-Cli实战

数据湖客户端运维工具Hudi-Cli实战 help hudi:student_mysql_cdc_hudi_fl->help AVAILABLE COMMANDSArchived Commits Commandtrigger archival: trigger archivalshow archived commits: Read commits from archived files and show detailsshow archived commit stats: …...

编程日记 2023/9/20 4:58:55

RK3588 添加ROOT权限

一.ROOT简介 ROOT权限是Linux和Unix系统中的超级管理员用户帐户&#xff0c;该帐户拥有整个系统的最高权利&#xff0c;可以执行几乎所有操作。ROOT就是获取安卓系统中的最高用户权限&#xff0c;以便执行一些需要高权限才能执行的操作(包括卸载系统自带程序、刷机、备份、还原…...

编程日记 2023/9/20 4:57:54

设计网站国外网站/百度云搜索

快速启动终端: ctraltt终端字体放大: ctrshift终端字体缩小: ctr-ls: 查看当前目录的下文件信息pwd: 查看当前目录的路径touch: 创建文件mkdir: 创建文件夹rmdir&#xff1a; 删除空文件夹rm: 默认删除的是文件&#xff0c; -r表示以递归的方式删除文件夹里面的所有文件信息最后…...

编程日记 2024/11/5 13:15:45

网站前台做好之后再怎么做/福州seo网站排名

其实 业务上经常会出现 在浏览器弹出一个 提示框 让用户输入一些东西 但是把 如果后面的 元素还能滚动的话 就给人一种 很不爽的感觉 建议 弹窗出现的时候禁止 body 内容滚动 用户体验就更好了 body{overflow:hidden; }让弹窗出来 设置 body的样式 overflow:hidden 弹窗消失…...

编程日记 2024/11/5 10:21:58

佛山网站建设app/一年的百度指数

在家自制手工曲奇&#xff0c;因为在制作过程中没有添加防腐剂和添加剂&#xff0c;所以保质期多半为15-30天&#xff0c;而且必须是密封好保存在阴凉干燥处&#xff0c;否则时间会缩短。为了保证手工曲奇的口感&#xff0c;曲奇应尽量在短时间内吃完&#xff0c;那如果做的太多…...

编程日记 2024/11/5 10:11:51

免费域名怎么做网站/网站seo推广优化

1 今天自动添加了一些主机&#xff0c;发现有一个是红色的&#xff0c;而且是网络是可以通的&#xff0c;其他机器都很好&#xff0c;重启了还是问题依旧2 于是想用zabbix_get试一下[rootZabbix-Server ~]# zabbix_get -s 90.90.90.118 -k system.cpu.switches zabbix_get [100…...

编程日记 2024/11/5 8:38:01

做网站毕业设计/微信推广软件哪个好

1、下载android源码2、在linux下生成android.ipr等执行下面的命令即可生成android.ipr等文件&#xff1a;cd &#xff5e;/aosp //具体的源码根目录source build/envsetup.sh //用于初始化环境变量mmm development/tools/idegen/ //生成文件out/host/linux-x86/framework/idege…...

编程日记 2024/11/5 8:15:03

公司网站报价/百度搜索风云榜总榜

想要保证缓存与数据库的双写一致&#xff0c;一共有4种方式&#xff1a; 先更新缓存&#xff0c;再更新数据库&#xff1b; 先更新数据库&#xff0c;再更新缓存&#xff1b; 先删除缓存&#xff0c;再更新数据库&#xff1b; 先更新数据库&#xff0c;再删除缓存。 我们需要做…...

编程日记 2024/11/5 6:30:45