搞懂 Event：是什么、有什么用、用在哪、解决什么问题

搞懂 Event是什么、有什么用、用在哪、解决什么问题.event事件对象是JS 事件驱动模型的核心产物当用户在网页上做任何动作点击、输入、按键等时浏览器会自动生成一个包含该动作所有细节的对象这个对象就是event我们通常简写为e。Event 有什么用解决了什么问题如果没有 event你根本不知道用户具体做了什么和实现不了你想要的特定功能不知道他点了页面上的哪个元素不知道他按了键盘的 “回车” 还是 “ESC”不知道他鼠标在图片的哪个位置不知道他在输入框里写了什么你点链接它非要跳转走通过e.xxx属性你能精准读取所有细节属性解决的问题e.target你到底点了 / 操作了谁e.key你按了键盘的哪个键e.offsetX/Y你鼠标在元素的哪个位置e.target.value你在输入框里写了什么通过e.xxx()方法你能强行修改浏览器的默认行为方法解决的问题e.preventDefault()阻止浏览器默认行为如表单刷新、链接跳转e.stopPropagation()阻止事件冒泡如只关弹窗不触发背景具体请查看MDN - Event文档Event 使用在什么场景动态列表 / 事件委托问题列表里的元素是动态添加的每次添加都重新绑事件太麻烦。用 Event 解决给父元素绑事件用e.target判断真正点击的是谁。// 只给 ul 绑一次事件动态添加的 li 也能响应ul.addEventListener(click,function(e){if(e.target.classList.contains(delBtn)){e.target.parentElement.remove();// 删除对应的 li}});表单验证问题用户输入不对时不能让表单提交刷新页面。用 Event 解决用e.preventDefault()阻止默认提交。form.addEventListener(submit,function(e){if(!email.includes()){e.preventDefault();// 阻止刷新alert(邮箱格式不对);}});回车提交 / ESC 关闭问题不知道用户按了哪个键无法实现快捷操作。用 Event 解决用e.key判断按键。input.addEventListener(keydown,function(e){if(e.keyEnter)submit();// 回车提交if(e.keyEscape)closeModal();// ESC 关闭弹窗});弹窗关闭阻止冒泡问题点击弹窗里的关闭按钮会连弹窗背景一起触发导致弹窗关了又开。用 Event 解决用e.stopPropagation()阻止事件传到父元素。closeBtn.addEventListener(click,function(e){e.stopPropagation();// 不让事件传到背景modal.style.displaynone;});鼠标跟随 / 画图问题不知道鼠标在元素的哪个位置无法实现交互效果。用 Event 解决用e.offsetX/Y获取坐标。canvas.addEventListener(mousemove,function(e){console.log(鼠标在画布内的坐标,e.offsetX,e.offsetY);// 这里可以写画图逻辑});