〖大前端 - 基础入门三大核心之JS篇㊵〗- DOM事件监听及onxxx的使用

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐ 事件监听
    • 🌟 onxxxx属性
      • ✨ 常见的鼠标事件监听
      • ✨ 常见的键盘事件监听
      • ✨ 常见的表单事件监听
      • ✨ 常见的页面事件监听

⭐ 事件监听

DOM允许我们书写JavaScript代码以让HTML元素对事件作出反应

事件:用户与网页的交互动作(如:当用户点击元素时、当鼠标移动到元素上时、当文本空的内容被改变时、当键盘在文本框中被按下时、当网页已加载完毕时。。。)

监听:让极端及随时能够发现这个事件,从而执行程序员预先编写的一些程序

设置事件监听的方法主要有onxxxx和addEventListener()两种


🌟 onxxxx属性

设置onxxxx属性是最简单的设置事件监听的方法。比如onclick属性,代表当鼠标单击事件。

示例代码:

oBox.onclick = function (){//点击盒子时,将执行这里的语句
}

举个例子,点击盒子弹出一个alert:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 200px;height: 200px;background-color: #ccc;}</style>
</head>
<body><div id="box"></div><script>var oBox = document.getElementById('box');oBox.onclick = function () {alert('点击盒子弹出这个弹框');}</script>
</body>
</html>

image-20230418154635209


✨ 常见的鼠标事件监听

事件名事件描述
onclick当鼠标单机某个对象
ondblclick当鼠标双击某个对象
onmousedown当某个鼠标按键在某个对象上被按下
onmouseup当某个鼠标按键在某个对象上被松开
onmousemove当某个鼠标按键在某个对象上被移动
onmouseenter当鼠标进入某个对象(相似事件onmouseover)
onmouseleave当鼠标离开某个对象(相似事件onmouseout)
onmousewheel当鼠标滚轮滚动

一些鼠标事件监听的示例代码:

oBox.onclick = function () {console.log('鼠标单击');
}
oBox.ondblclick = function () {console.log('鼠标双击');
}
oBox.onmousedown = function () {console.log('鼠标按下');
}
oBox.onmouseup = function () {console.log('鼠标松开');
}
oBox.onmousemove = function () {console.log('鼠标移动');
}
oBox.onmouseenter = function () {console.log('鼠标移入');
}
oBox.onmouseleave = function () {console.log('鼠标移出');
}
oBox.onmousewheel = function () {console.log('鼠标滚轮滚动');
}

image-20230419105841276


✨ 常见的键盘事件监听

事件名事件描述
onkeypress当某个键盘的键被按下(系统按钮(如箭头键、退格键…)和功能键(如F1、F2…)无法得到识别)
onkeydown当某个键盘的键被按下(系统按钮和功能键可以识别,并且会先于onkeypress发生)
onkeyup当某个键盘的键被松开

难点在于onkeypress和onkeydown的区别

一些键盘事件监听的示例代码:

<body>姓名:<input type="text" id="nameField"><script>var nameField = document.getElementById('nameField');nameField.onkeydown = function () {console.log('键盘按钮被按下');};nameField.onkeypress = function () {console.log('键盘按钮被按下(不能识别箭头退格等)');};nameField.onkeyup = function () {console.log('键盘按钮松开');};</script>
</body>

image-20230419133835864


✨ 常见的表单事件监听

事件名事件描述
onchange当用户改变了域的内容(比如修改文本框的内容,然后鼠标在空白处点击一下时会修改完成,此时会触发该事件)
oninput当用户正在改变域的内容(重点是正在,非常类似onkeydown的功能)
onfocus当某元素获得焦点(比如tab键或鼠标点击)
onblur当某元素失去焦点
onsubmit当表单被提交
onreset当表单被重置

先来了解一个扩展小知识——获取表单的dom节点:

先通过访问元素的常见方法获取到这个表单,再通过表单+打点的方式获取到其中的子节点

示例代码:

<body><form action="" id="myform"><p>姓名:<input type="text" name="nameField"></p><p>年龄:<input type="text" name="ageField"></p></form><script>var myform = document.getElementById('myform');  //先获取到这个表单var nameField = myform.nameField;   //再通过表单+打点的方式获取到其中的子节点var ageField = myform.ageField;  //再通过表单+打点的方式获取到其中的子节点</script>
</body>

一些表单事件监听的示例:

<body><form action="" id="myform"><p>姓名:<input type="text" name="nameField"></p><p>年龄:<input type="text" name="ageField"></p><p><input type="submit" name="submitField"></p><p><input type="reset" name="resetField"></p></form><script>var myform = document.getElementById('myform');  //先获取到这个表单var nameField = myform.nameField;   //再通过表单+打点的方式获取到其中的子节点var ageField = myform.ageField;  //再通过表单+打点的方式获取到其中的子节点nameField.onchange = function () {console.log('您修改了姓名');};nameField.oninput = function () {console.log('您正在修改姓名');};ageField.onfocus = function () {console.log('年龄文本框获得焦点');};ageField.onblur = function () {console.log('年龄文本框失去焦点');};myform.onsubmit = function () {alert('您的表单被提交');};myform.onreset = function () {alert('您的表单被重置');};</script>
</body>

image-20230419142310320


✨ 常见的页面事件监听

onload当页面或图像被加载完成
onunload当用户退出页面
事件名事件描述

示例代码:

window.onload = function () {console.log('页面加载完成');
};
window.onunload = function () {console.log('退出页面');
};

更详细的页面事件监听在学到BOM时再介绍。

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

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

相关文章

多目标应用:基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、基于非支配排序的鲸鱼优化算法NSWOA 基于非支配排序的鲸鱼优化算法NSWOA简介&#xff1a; 三、基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化…

从android.graphics.Path中取出Point点,Kotlin

从android.graphics.Path中取出Point点&#xff0c;Kotlin /*** 从一条Path中获取多少个Point点*/private fun getPoints(path: Path, pointCount: Int): Array<FloatPoint?> {val points arrayOfNulls<FloatPoint>(pointCount)val pm PathMeasure(path, false)…

SpringBoot——数据访问

优质博文&#xff1a;IT-BLOG-CN 对于数据访问层&#xff0c;无论是SQL还是NoSQL&#xff0c;SpringBoot默认采用整合Spring Data的方式进行统一处理&#xff0c;添加大量自动配置&#xff0c;屏蔽了很多设置。引入各种xxxTemplate&#xff0c;xxxRepository来简化我们对数据访…

MySQL索引,你真的学会了?索引底层原理是什么?索引什么时候失效,你知道吗?

目录 1、什么是索引 2、索引分类 3、索引的基本操作 3.1、主键索引 3.2、单列索引 3.3、唯一索引 3.4、复合索引 4、索引的底层原理 为什么使用BTree而不是B-Tree? 如果数据量特别大的情况下&#xff0c;BTree会不会深度太深影响查询效率&#xff1f; 5、聚簇索引和…

OpenGL_Learn15(投光物)

1. 平行光 cube.vs******************#version 330 core layout (location 0) in vec3 aPos; layout (location 1 ) in vec3 aNormal; layout (location2) in vec2 aTexCoords;out vec3 FragPos; out vec3 Normal; out vec2 TexCoords;uniform mat4 model; uniform mat4 view…

车牌识别 支持12种中文车牌类型 车牌数据集下载

开源代码 如果觉得有用&#xff0c;不妨给个Star⭐️&#x1f31f;支持一下吧~ 谢谢&#xff01; Acknowledgments & Contact 1.WeChat ID: cbp931126 2.QQ Group&#xff1a;517671804 加微信(备注&#xff1a;PlateAlgorithm),进讨论群可以获得10G大小的车牌检测和识…

vue3的单组件编写【一】

文章目录 :tiger: 单组件的编写:rainbow:全新的 setup 函数:rocket: setup 的含义:rocket:setup 的参数使用:rocket: defineComponent 的作用 :rainbow: 组件的生命周期:rocket: 升级变化:rocket: 使用 3.x 的生命周期 :rainbow: 组件的基本写法:rocket: 回顾 Vue 2:rocket: 了…

DPAFNet:一种用于多模式脑肿瘤分割的残差双路径注意力融合卷积神经网络

DPAFNet: A Residual Dual-Path Attention-Fusion Convolutional Neural Network for Multimodal Brain Tumor Segmentation DPAFNet&#xff1a;一种用于多模式脑肿瘤分割的残差双路径注意力融合卷积神经网络背景贡献实验方法ulti-scale context feature extraction block&…

【Spring】之IoC与对象存取

未来的几周时间&#xff0c;大概率我会更新一下Spring家族的一些简单知识。而什么是Spring家族&#xff0c;好多同学还不是很清楚&#xff0c;我先来简单介绍一下吧&#xff1a; 所谓Spring家族&#xff0c;它其实就是一个框架&#xff0c;是基于Servlet再次进行封装的内容。为…

VMware——WindowServer2012R2环境安装mysql5.7.14解压版_互为主从(图解版)

目录 一、服务器信息二、192.168.132.35服务器上安装mysql&#xff08;主&#xff09;2.1、环境变量配置2.2、安装2.2.1、修改配置文件内容2.2.2、初始化mysql并指定超级用户密码2.2.3、安装mysql服务2.2.4、启动mysql服务2.2.5、登录用户管理及密码修改2.2.6、开启远程访问 三…

C++函数

转载知呼大佬06 - C函数 - 知乎 (zhihu.com) 06 - C函数 本期我们讨论的是 C 中的函数。 函数到底是什么呢&#xff0c;函数就是我们写的代码块&#xff0c;被设计用来执行特定的任务&#xff0c;以后我们学习 class 类的时候&#xff0c;这些块会被称为方法&#xff0c;但是…

windows电脑连接Android和iPhone真机调试

windows电脑连接Android和iPhone真机调试 目前用的是Hbuilder X编辑器&#xff0c;在正常情况下&#xff0c;Android手机需要在 "设置 ----> 更多设置 ----->关于手机 ------> 版本号&#xff08;手指点击5-7下即可打开开发者模式&#xff09;"(我的是vivo的…

hosts 配置本地映射不生效

关闭所有科学上网工具&#xff01;&#xff01;刷新 DNS 解析缓存&#xff1a;ipconfig /flushdns关闭所有浏览器访问映射地址时&#xff0c;带上端口号

给ORACLE创建一个用新用户并且给部分视图或表查询权限

这里写自定义目录标题 视图或表属于哪个用户查询登录所属账户 打开 cmd输入 sqlplus/nologconn 账号/密码 as sysdba创建用户赋予用户视图权限赋予用户视图权限连接数据库权限 视图或表属于哪个用户查询 表&#xff1a; SELECT * FROM ALL_OBJECTS WHERE OBJECT_TYPETABLE a…

MATLAB | 绘图复刻(十三) | 带NaN图例的地图绘制

有粉丝问我地图绘制如何添加NaN&#xff0c;大概像这样&#xff1a; 或者这样&#xff1a; 直接上干货&#xff1a; 原始绘图 假设我们有这样的一张图地图&#xff0c;注意运行本文代码需要去matlab官网下载Mapping Toolbox工具箱&#xff0c;但是其实原理都是相似的&…

C#的LINQ查询

当使用LINQ&#xff08;Language Integrated Query&#xff09;查询时&#xff0c;我们可以在C#中以一种类似于SQL的语法来查询数据。LINQ提供了一种统一的方式来查询各种数据源&#xff0c;如集合、数据库、XML等。 在上述示例中&#xff0c;我们使用LINQ查询来将两个列表根据…

LeetCode8-字符串转换整数(atoi)

目录 1.大神解法2.我的辣鸡解法:3.整数相加的溢出判断(chaGPT代码)4.整数相乘溢出判断(chatGPT代码) 到目前为止比较简单容易理解的一个代码: 参考链接: &#x1f517;:【8. 字符串转换整数 String to Integer (atoi) 【LeetCode 力扣官方题解】-哔哩哔哩】 1.大神解法 累乘和…

mysql redolog

一、什么是redolog日志 redolog又叫重做日志&#xff0c;处于存储引擎层&#xff0c;是innodb特有的日志。主要是为了实现事务的持久性而存在的。事务的持久性&#xff1a;只要提交了事务&#xff0c;出现停机或者崩溃的情况&#xff0c;都能将提交事务的数据修改正常持久化到…

被环境变量虐过一遍获得的启示

Oracle数据库环境存在两个数据库版本12C及19C&#xff0c;在执行一些操作时需要设置对应版本的环境变量 计划登录12C环境&#xff0c;于是按如下方式设置环境变量 export ORACLE_BASE/u01/app/oracle export ORACLE_HOME$ORACLE_HOME/product/12.2.0/dbhome_1 export ORACLE_S…

springboot踩坑一:添加webapp文件夹能访问jsp却找不到静态资源404

参考一下链接解决问题&#xff1a; https://www.xjx100.cn/news/670143.html?actiononClick