标签事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btnID">点击事件</button>
<input type="text" id="inputID">
<span>我是最厉害的!!!</span>
<script>
/* 简单介绍标签相关的事件 */
/* (1) click 点击*/
/* (2) focus 获得焦点*/
/* (3) blur 失去焦点*/
/* (4) input 输入框的内容发生变化*/
/* (5) mouseenter 鼠标移入 | mouseleave 鼠标离开*/
/* 001-先获取按钮，给页面中的按钮添加点击事件 */
var oBtn = document.getElementById("btnID");
/* 说明：给按钮添加(设置)点击事件的事件处理函数，如果按钮被点击(事件被触发)，那么就会执行函数中的代码 */
/* 写法A */
// oBtn.onclick = function() {
// console.log("按钮被点击了--click1");
// console.log("按钮被点击了--click2");
// };
/* 写法B */
function handler() {
console.log("按钮被点击了--click1");
console.log("按钮被点击了--click2");
};
oBtn.onclick = handler;
/* 002-演示输入框获得焦点和失去焦点的事件 */
var oInput = document.getElementById("inputID");
oInput.onfocus = function() {
console.log("监听到输入框获得焦点");
};
/* 当输入框失去焦点的时候，总是要设置输入框的值为测试 */
oInput.onblur = function() {
console.log("监听到输入框失去焦点");
oInput.value = "测试";
}
/*003-演示input事件的使用：当输入框的内容发生变化的时候会触发 */
oInput.oninput = function() {
console.log("监听到输入框的内容发送了变化，当前输入框值=" + oInput.value);
}
/* 004-演示鼠标的移入和移出事件 */
/* 需求：当鼠标进入到span标签的时候，修改标签的内容韦：我是全宇宙最丑的！！！设置颜色为红色。 */
var oSpan = document.getElementsByTagName("span")[0];
oSpan.onmouseenter = function() {
console.log("监听到鼠标移入事件--span");
/* 修改标签的内容 */
oSpan.innerText = "我是全宇宙最丑的！！！";
/* 修改标签的样式 */
oSpan.style.color = "red";
}
oSpan.onmouseleave = function() {
console.log("监听到鼠标移出事件--span");
/* 修改标签的内容 */
oSpan.innerText = "我是最厉害的!!!";
/* 修改标签的样式 */
oSpan.style.color = "#000";
}
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现