当前位置：首页 > news >正文

【Java Web学习 | 第13篇】JavaScript(7) - 事件绑定 + 事件

news 2026/6/7 14:45:18

【Java Web学习 | 第13篇】JavaScript(7) - 事件绑定与事件机制（2026最新版）

恭喜你完成 DOM 操作！
现在进入事件绑定与事件机制，这是 JavaScript 实现用户交互（点击、输入、提交、滚动等）的核心技术。在 Java Web 项目中，几乎所有动态功能（表单提交、按钮操作、实时验证、列表交互）都依赖事件系统。

掌握本篇后，你就能优雅地处理用户行为，并为后续Fetch 调用 Spring Boot API做好准备。

1. 事件绑定三种方式（推荐顺序）

方式1：推荐 ——`addEventListener`（现代标准）

constbtn=document.querySelector('#submitBtn');btn.addEventListener('click',functionhandler(e){console.log('按钮被点击了');// e 是事件对象（Event）});

优点：

可以绑定多个事件处理函数
支持事件委托
可以移除监听（removeEventListener）
推荐在所有生产项目中使用

方式2：HTML 内联（学习阶段可用，生产不推荐）

<buttononclick="handleClick()">点击我</button><script>functionhandleClick(){alert('点击了！');}</script>

方式3：DOM0 方式（旧方式，不推荐）

btn.onclick=function(){console.log('点击');};// 缺点：只能绑定一个，后绑定的会覆盖前面的

2. 事件对象（Event）常用属性与方法

element.addEventListener('click',(e)=>{console.log(e.type);// "click"console.log(e.target);// 实际被点击的元素console.log(e.currentTarget);// 当前绑定事件的元素（委托时很重要）console.log(e.clientX,e.clientY);// 鼠标相对于视口的坐标console.log(e.pageX,e.pageY);// 相对于文档的坐标e.preventDefault();// 阻止默认行为（如表单提交、链接跳转）e.stopPropagation();// 阻止事件冒泡});

3. 常用事件类型速查（Java Web 高频）

事件类别	常用事件	典型使用场景
鼠标事件	click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove	按钮点击、悬停效果
键盘事件	keydown, keyup, keypress	快捷键、表单输入控制
表单事件	input, change, focus, blur, submit	实时验证、表单提交
页面事件	load, DOMContentLoaded, resize, scroll	页面初始化、懒加载
触摸事件	touchstart, touchmove, touchend	移动端交互
其他	drag, drop, contextmenu	拖拽、右键菜单

最常用事件组合：

DOMContentLoaded：DOM 解析完就执行（比load更快）
input：实时监听输入框变化（搜索、防抖常用）
submit：表单提交

4. 事件冒泡与捕获（Event Bubbling & Capturing）

事件默认从目标元素向上冒泡到document。

// 事件委托（最高性能写法，推荐！）document.getElementById('userList').addEventListener('click',(e)=>{// 判断是否点击了删除按钮if(e.target.closest('.delete-btn')){constitem=e.target.closest('.user-item');console.log('删除用户',item.dataset.id);item.remove();}});

事件委托优点：

只需绑定一个监听器
新增的动态元素自动支持事件
性能更好

5. 完整实战示例（用户列表 + 表单提交模拟）

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>事件绑定实战 - Java Web</title><style>.user-item{padding:12px;margin:8px 0;background:#f8f9fa;border-radius:8px;}.delete-btn{color:#dc3545;margin-left:15px;}</style></head><body><h1>用户管理</h1><formid="userForm"><inputtype="text"id="username"placeholder="用户名"required><inputtype="number"id="age"placeholder="年龄"required><buttontype="submit">添加用户</button></form><divid="userList"></div><script>constusers=[];constuserList=document.getElementById('userList');constform=document.getElementById('userForm');// 渲染函数functionrenderUsers(){userList.innerHTML=users.map((user,index)=>`<div class="user-item">${index}">${user.username}（${user.age}岁） <button class="delete-btn">${index}">删除</button> </div>`).join('');}// 事件委托（推荐写法）userList.addEventListener('click',(e)=>{if(e.target.classList.contains('delete-btn')){constindex=parseInt(e.target.dataset.index);users.splice(index,1);renderUsers();}});// 表单提交事件form.addEventListener('submit',(e)=>{e.preventDefault();// 阻止默认提交constusername=document.getElementById('username').value.trim();constage=parseInt(document.getElementById('age').value);if(username&&age){users.push({username,age});renderUsers();// 清空表单form.reset();console.log('用户添加成功，当前用户数：',users.length);}});// 输入实时提示（input 事件）document.getElementById('username').addEventListener('input',(e)=>{if(e.target.value.length>10){e.target.style.borderColor='red';}else{e.target.style.borderColor='#007bff';}});// 页面加载完成后初始化document.addEventListener('DOMContentLoaded',()=>{console.log('DOM 已加载完成，开始绑定事件');renderUsers();});</script></body></html>

6. 防抖与节流（实际项目必备）

// 防抖（用户输入停止后一段时间才执行，常用于搜索）functiondebounce(fn,delay=300){lettimer=null;returnfunction(...args){clearTimeout(timer);timer=setTimeout(()=>fn.apply(this,args),delay);};}// 使用示例constsearchInput=document.getElementById('search');searchInput.addEventListener('input',debounce((e)=>{console.log('搜索关键词：',e.target.value);// 这里可以调用后端搜索 API},500));