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

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

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

1.什么是事件监听

事件:是指发生在HTML端的事件,主要指以下几种。

1.按钮被点击

2.鼠标移动到元素上

3.按到了键盘

事件监听:当触发了事件时,JS会执行相对应的代码。

2.实现事件监听

2.1通过HTML属性来进行绑定

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

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

2.2通过DOM元素绑定

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

js 复制代码
<input type = "button" id="btn" value="按钮2">

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

常见事件:

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

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

js 复制代码
<!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一栏看到我们的输出

相关推荐
用户203119660096几秒前
空合并运算符
前端·后端
Java~~几秒前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
篱笆院的狗几秒前
Java 中 ConcurrentHashMap 1.7 和 1.8 之间有哪些区别?
java·开发语言
我头上有犄角ovo2 分钟前
🤯 什么?!还在跪求后端大佬帮你上线项目?NodeSSH 让你前端也能玩转部署:从求人到自主的逆袭之路!
前端
与秋逐鹿¥22 分钟前
在Mybatis中为什么要同时指定扫描mapper接口和 mapper.xml 文件,理论单独扫描 xml 文件就可以啊
java·tomcat·mybatis
app1e23422 分钟前
ctfshow web入门 命令执行(29-77)
android·前端
wordbaby25 分钟前
AbortController 详解:如何优雅地取消异步操作
前端
程序员爱钓鱼25 分钟前
从零开始开发一个简易的五子棋游戏:使用 HTML、CSS 和 JavaScript 实现双人对战
前端·javascript·游戏开发
林太白27 分钟前
NestJS企业级登录注册如何做
前端·javascript·后端
cong_30 分钟前
🔥 我的开源项目火了!竟被各个公众号转发
前端·后端·github