JAVA前端快速入门基础_javascript入门(03)

写在前面:本文用于快速学会简易的JS,仅做扫盲和参考作用

本章节主要介绍JS的事件监听

1.什么是事件监听

事件:是指发生在HTML端的事件,主要指以下几种。
1.按钮被点击
2.鼠标移动到元素上
3.按到了键盘
事件监听:当触发了事件时,JS会执行相对应的代码。

2.实现事件监听

2.1通过HTML属性来进行绑定

下列代码可以实现,点击按钮后弹出我被点击了的提示框

<input type= "button" onclick = "on()" value = "a">
<script>
	function on(){
		alert("我被点击了");
	}
</script>

请添加图片描述

2.2通过DOM元素绑定

下列代码可以实现上述代码的同等效果

<input type = "button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
		alert('我被点击了');
	}
</script>

常见事件:

事件名称事件描述
onclick鼠标单机事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面or图像被加载完成
onsubmit当表单被提交时触发事件
onkeydown键盘的键被按下
onmouseover鼠标被移动到元素之上
onmouseout鼠标从某元素移开

通过运行以下代码可以更好的理解这些事件的触发方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type = "button" id="btn" value="按钮2">
    <br>
    <input type="number" id="btn2" value="12">
    <img src="C:\\Users\\PC\\Desktop\\2\\1.jpg" id ="btn3">

<script>
	document.getElementById('btn').onclick=function(){
		alert('我被点击了');
	}
    document.getElementById('btn2').onblur=function(){
        console.log("移开到输入框里面了")
    }
    document.getElementById('btn2').onfocus=function(){
        console.log("移动到输入框里面了")
    }
    document.getElementById('btn3').onload=function(){
        console.log("加载img")
    }
    document.getElementById('btn3').onmouseover=function(){
        console.log("移动到图片上了")

    }
    document.getElementById('btn3').onmouseout=function(){
        console.log("移开图片了")
        
    }
</script>
</body>
</html>

可以在右下边的console一栏看到我们的输出
请添加图片描述

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

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

相关文章

ECharts在网页中添加可视化图标-在网页中添加交互图表+option模块案列详解

一、引言 ECharts 是一个使用 JavaScript 编写的开源可视化库&#xff0c;它可以在浏览器中生成交互式的图表。无论是折线图、柱状图、散点图还是饼图&#xff0c;ECharts 都能轻松应对。本文将带领大家了解如何在网页中添加 ECharts 可视化图标。 本章可以直接跳到第五点完整…

Flask简介

Flask简介 安装概述使用PyCharm创建一个Flask程序 Flask程序的基本结构初始化路由和视图函数启动服务器请求-响应循环 安装 概述 Flask算是小型框架&#xff0c;小到可以称为“微框架”。Flask 非常小&#xff0c;因此你一旦能够熟练使用它&#xff0c;很可能就能读懂它所有的…

Copilot Workspace是GitHub对人工智能驱动的软件工程的诠释

软件开发的未来是人工智能驱动的集成开发环境吗&#xff1f;至少GitHub 是这样想的。 在今年初秋于旧金山举行的 GitHub Universe 年度大会之前&#xff0c;GitHub 发布了 Copilot Workspace&#xff0c;这是一种开发环境&#xff0c;利用 GitHub 所称的 “Copilot 驱动的代理…

OneFlow新概念清单,AI深度学习的革命性突破(AI写作)

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

kotlinDSL控制的安卓项目导入已存在的模块后sync报错

原因很明显&#xff0c;但是我还找了好久 因为在import时并没有选择groove还是kotlin控制&#xff0c; 所以默认为groovy控制的&#xff0c;然而主项目是由kotlin dsl控制的grale行为。 原因清楚之后&#xff0c;就可以去检查一下&#xff0c;项目里是否包含了settings.gradle和…

基于EBAZ4205矿板的图像处理:03使用VIO调试输出HDMI视频图像

基于EBAZ4205矿板的图像处理&#xff1a;03使用VIO调试输出HDMI视频图像 在zynq调试时VIO是真的方便&#xff0c;特此写一篇博客记录一下 先看效果 项目简介 下面是我的BD设计&#xff0c;vtc用于生成时序&#xff0c;注意&#xff0c;2021.2的vivado的vtcIP是v6.2版本&…

动手学深度学习——softmax分类

1. 分类问题 回归与分类的区别&#xff1a; 回归可以用于预测多少的问题&#xff0c; 比如"预测房屋被售出价格"&#xff0c;它是个单值输出。softmax可以用来预测分类问题&#xff0c;例如"某个图片中是猫、鸡还是狗&#xff1f;"&#xff0c;这是一个多…

用Docker 创建并运行一个MySQL容器

可以在DockerHub官网上荡:mysql - Official Image | Docker Hub 指令是:docker pull mysql; 因为文件比较大可能时间比较长&#xff0c;我是跟着黑马的课走的 课程提供的有文件&#xff0c;我就用已有的资源了。 在tmp目录里放入mysql.tar包 然后cd进去 输入指令:docker lo…

java技术栈快速复习05_基础运维(linux,git)

Linux知识总览 linux可以简单的理解成和window一样的操作系统。 Linux和Windows区别 Linux是严格区分大小写的&#xff1b;Linux中一切皆是文件&#xff1b;Linux中文件是没有后缀的&#xff0c;但是他有一些约定俗成的后缀&#xff1b;Windows下的软件一般是无法直接运行的Li…

管理能力学习笔记八:Will-Skill矩阵“盘“团队

如何把握带教中的“度”&#xff0c;才能在把事情做好的基础上&#xff0c;又能使员工获得成长呢&#xff1f; 需要做到 合理授权 & 适当辅导 如何做到&#xff1f; 通过使用 意愿-技能矩阵(Will-Skill Matrix) 辨别不同带教方法的适用情形&#xff0c;"盘"…

【Vue 2.x】学习vue之一基础部分

文章目录 Vue 一基础部分第一章1、git两个分支主分支子分支 使用方法方式1&#xff1a;采用命令的方式操作分支方式2&#xff1a;在idea中使用git的分支 向git远程仓库提交时忽略文件使用git时的一些冲突注意事项 2、Vue问题1&#xff1a;什么是Vue&#xff1f;问题2&#xff1…

网站升级提示:我用react+go重构了网站并记录了部署项目简要步骤

先贴出来地址&#xff0c;这是我网站的地址易查网 可能有细心的小伙伴们已经看到了&#xff0c;原来我的网站是这样式的 妥妥的phph5 改造 前端react框架 前段时间学习了react&#xff0c;正愁无处练手&#xff0c;就有人说我的网站很low,我感觉这正是一个好的机会&#xff…

纯血鸿蒙APP实战开发——发布图片评论

介绍 本示例将通过发布图片评论场景&#xff0c;介绍如何使用startAbilityForResult接口拉起相机拍照&#xff0c;并获取相机返回的数据。 效果图预览 使用说明 通过startAbilityForResult接口拉起相机&#xff0c;拍照后获取图片地址。 实现思路 创建CommentData类&#…

翻译: 什么是ChatGPT 通过图形化的方式来理解 Transformer 架构 深度学习二

在本章中,我们将深入探讨 网络的开始和 结束阶段发生的情况, 我将花大量时间回顾一些重要的背景知识,这些知识是熟悉Transformer的机器学习工程师的基础知识。 如果你已经熟悉背景知识,迫不及待地想了解更多,你可以跳到下一节,重点将放在Transformer的核心部分——注意…

nacos(docker部署)+springboot集成

文章目录 说明零nacos容器部署初始化配置高级配置部分访问权限控制命名空间设置新建配置文件 springboot配置nacos添加依赖编写测试controller 说明 nacos容器部署采用1Panel运维面板&#xff0c;进行部署操作&#xff0c;简化操作注意提前安装好1Panel和配置完成docker镜像加…

深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

上一章介绍了Tomcat的默认连接器&#xff0c;后续程序都会使用默认连接器。前面有讲过Catalina容器的两大块内容就是连接器与Servlet容器。不同于第二章的自定义丐版Servlet容器&#xff0c;这一章就来探讨下Catalina中的真正的Servlet容器究竟长啥样。 四种容器 在Catalina中…

Unity涂鸦纹理实现

文章目录 前言实现过程UV坐标和UI坐标对齐修改像素代码 前言 心血来潮实现下场景中提供一张纹理进行涂鸦的功能。 最终实现效果: 实现过程 UV坐标和UI坐标对齐 这里的纹理使用了UGUI的Canvas进行显示&#xff0c;所以这里使用一张RawImage。 因为Unity的视口坐标是以左下角…

【Excel】excel计算相关性系数R、纳什效率系数NSE、Kling-Gupta系数KGE

对于采用的数据&#xff1a; B2:B10958是观测值的所在范围 C2:C10958是模型计算值的所在范围 一、相关系数R是用来衡量两个变量之间线性关系强度和方向的统计量。在水文学和气象学中&#xff0c;常用的相关系数是皮尔逊相关系数&#xff08;Pearson correlation coefficient&am…

Baidu Comate:“AI +”让软件研发更高效更安全

4月27日&#xff0c;百度副总裁陈洋出席由全国工商联主办的第64届德胜门大讲堂&#xff0c;并发表了《深化大模型技术创新与应用落地&#xff0c;护航大模型产业平稳健康发展》主题演讲。陈洋表示&#xff0c;“人工智能”成为催生新质生产力的重要引擎&#xff0c;对于企业而言…

线上线下收银一体化,新零售POS系统引领连锁门店数字化转型-亿发

在市场竞争日益激烈的背景下&#xff0c;没有哪个商家能够永远屹立不倒。随着互联网技术的快速发展&#xff0c;传统的线下门店面临着来自电商和新零售的新型挑战。实体零售和传统电商都需要进行变革&#xff0c;都需要实现线上线下的融合。 传统零售在客户消费之后就与商家失…