〖大前端 - 基础入门三大核心之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时再介绍。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

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

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

人工智能基础_机器学习046_OVR模型多分类器的使用_逻辑回归OVR建模与概率预测---人工智能工作笔记0086

首先我们来看一下什么是OVR分类.我们知道sigmoid函数可以用来进行二分类,那么多分类怎么实现呢?其中一个方法就是使用OVR进行把多分类转换成二分类进行计算. OVR,全称One-vs-Rest,是一种将多分类问题转化为多个二分类子问题的策略。在这种策略中,多分类问题被分解为若干个二…

小诺2.0开源版工程启动

小诺是一款开源的前后端开发框架&#xff0c;同若依、SpringBladex一样可作为私活、外包脚手架。 开源地址&#xff1a;Snowy: 最新&#xff1a;&#x1f496;国内首个国密前后分离快速开发平台&#x1f496;&#xff0c;采用Vue3AntDesignVue3 ViteSpringBootMpHuToolSaToke…

计算机基础知识56

choices参数的使用 # 应用场景&#xff1a; 学历&#xff1a;小学、初中、高中、本科、硕士、博士、1 2 3 4 5 6 客户来源: 微信渠道、广告、介绍、QQ、等等 性别&#xff1a;男、女、未知 # 对于以上可能被我们列举完的字段我们一般都是选择使用…

操作系统(三)| 进程管理上 进程状态 同步 互斥

目录 1 进程和程序区别 2 进程状态 2.1 进程的5种基本状态 2.2 进程状态之间转换 2.3 七状态模型 3 进程描述 3.1 进程控制块 PCB 3.2 进程块组织方式 4 进程控制 5 进程同步 互斥 5.1 区分进程互斥和同步 5.2 核心方案 5.3 其他方案 方案1 设置锁变量 方案2 严…

Mybatis Plus分页实现逻辑整理(结合芋道整合进行解析)

Mybatis Plus分页实现逻辑整理&#xff08;结合芋道整合进行解析&#xff09; 我希望如春天般的你&#xff0c;身着白色的婚纱&#xff0c;向我奔赴而来&#xff0c;我愿意用全世界最温情的目光&#xff0c;朝着你的方向望去——姗姗来迟。 1.背景介绍 https://baomidou.com/p…

selenium下载安装对应的chromedriver并执行

文章目录 selenium对应版本chrome驱动下载114以及之前的chrome版本119/120/121的chrome版本 chromedriver安装执行selenium代码 selenium Selenium是广泛使用的模拟浏览器运行的库&#xff0c;它是一个用于Web应用程序测试的工具。 Selenium测试直接运行在浏览器中&#xff0c…

【机器学习】033_反向传播

一、计算图、反向传播原理 1. 回顾前向传播 例&#xff1a;假设现在有一个神经网络&#xff0c;其仅有一个输出层和一个神经单元 定义 定义 &#xff0c;即激活函数对激活值不再做具体处理 定义平方损失函数 &#xff0c;计算a的值与真实值的差距 此时&#xff0c;通过计算…

032.Python面向对象_类补充_描述器

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

java: 无效的目标发行版: 17 问题解决

今天在写完类点击运行后显示java: 无效的目标发行版: 17 网上查询了一番&#xff0c;发现有几个地方需要注意。 还有一个就是设置中&#xff0c;下面的就是我本次问题所在&#xff0c;不知道为什么&#xff0c;他自动添加了下面的东西 一个方法是把目标字节码版本改为正确的&a…

跳台阶游戏(Python排列组合函数itertools.combinations的应用)

给定台阶总数和两种单次可跳级数&#xff0c;编写自定义函数&#xff0c;计算所有的游戏组合方案数量。 (笔记模板由python脚本于2023年11月19日 19:18:48创建&#xff0c;本篇笔记适合熟悉python自定义函数编写&#xff0c;了解排列组合知识的coder翻阅) 【学习的细节是欢悦的…

mysql 查询

-- 多表查询select * from tb_dept,tb_emp; 内来链接 -- 内连接 -- A 查询员工的姓名 &#xff0c; 及所属的部门名称 &#xff08;隐式内连接实现&#xff09;select tb_emp.name,tb_dept.name from tb_emp,tb_dept where tb_emp.idtb_emp.id;-- 推荐使用select a.name,b.n…

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、开启远程访问 三…

电脑显示msvcp140_1.dll丢失的5个常用解决方法,亲测可修复

常见于计算机操作中的"msvcp140_1.dll丢失"错误警示&#xff0c;往往令部分应用程序无法正常启动。为了解决这个问题&#xff0c;我们需要采取一些措施来修复丢失的文件。本文将介绍6个解决msvcp140_1.dll丢失的方法&#xff0c;帮助大家快速恢复计算机的正常运行。 …

Week-T10 数据增强

文章目录 一、准备环境和数据1.环境2. 数据 二、数据增强&#xff08;增加数据集中样本的多样性&#xff09;三、将增强后的数据添加到模型中四、开始训练五、自定义增强函数六、一些增强函数 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f…

我在CSDN开组会1-蒙特卡洛模拟在矿床学的应用展望

各位老师、同学们&#xff0c;大家好。今天组会的内容是蒙特卡洛模拟在矿床学的应用展望。 为什么要讲蒙特卡洛模拟呢&#xff0c;因为我发现在地质学方面已经有不少应用&#xff0c;但是蒙特卡洛模拟延伸的知识太晦涩了&#xff0c;劝退了很多探究者们。因此&#xff0c;计划…

Django批量插入数据及分页器

文章目录 一、批量插入数据二、分页1.分页器的思路2.用一个案例试试3.自定义分页器 一、批量插入数据 当我们需要大批量创建数据的时候&#xff0c;如果一条一条的去创建或许需要猴年马月 我们可以先试一试for循环试试 我们首先建立一个模型类来创建一个表 models.py&#xff…

有依次对应关系的数组X、Y、Z,如何排序其中一个X数组,使得另外的数组还与排序完成后的数组相对应(C语言实现)

1. 目的 有依次对应关系的数组X、Y、Z&#xff0c;排序其中一个X数组&#xff0c;使得另外的数组还与排序完成后的数组相对应&#xff0c;并打印出排序完成后的X、Y、Z数组。 2. 具体实现 以下面的这个对应关系为例&#xff0c;进行相应编程实现。 X [3.7,7.7,-6.6,1.5,-4.5…

腾讯云HAI域AI作画

目录 &#x1f433;前言&#xff1a; &#x1f680;了解高性能应用服务 HAI &#x1f47b;即插即用 轻松上手 &#x1f47b;横向对比 青出于蓝 &#x1f424;应用场景-AI作画 &#x1f424;应用场景-AI对话 &#x1f424;应用场景-算法研发 &#x1f680;使用HAI进行…

ChatGPT暂时停止开通plus,可能迎来封号高峰期

前言: 前两日,chat gpt的创始人 San Altman在网上发表了,由于注册的使用量超过了他们的承受能力,为了确保每个人的良好使用体验,chat gpt将暂时停止开通gpt plus。 情况: 前段时间好像出现了官网崩溃的情况,就连api key都受到了影响,所以现在就开始了暂时停止plus的注…