做网站坂田,手机自己免费制作app软件,在网上做翻译的网站,网页设计制作实验报告一、前言
在前端开发中#xff0c;用户与页面的交互行为#xff08;如点击按钮、输入文本、滚动页面等#xff09;都会触发相应的事件。而这些事件发生时#xff0c;浏览器会自动创建一个 事件对象#xff08;Event Object#xff09;#xff0c;它包含了当前事件的所有…一、前言
在前端开发中用户与页面的交互行为如点击按钮、输入文本、滚动页面等都会触发相应的事件。而这些事件发生时浏览器会自动创建一个 事件对象Event Object它包含了当前事件的所有信息。
掌握事件对象是实现复杂交互逻辑的基础技能之一。本文将带你深入了解
什么是事件对象事件对象的常见属性与方法如何阻止默认行为与事件传播实际开发中的典型使用场景推荐的最佳实践
通过这篇文章你将能够熟练地使用 event 对象来增强网页的交互体验。 二、什么是事件对象
当一个事件被触发时例如点击、键盘按下、鼠标移动等浏览器会自动为该事件创建一个事件对象Event 或其子类实例并将其作为参数传递给事件处理函数。
document.addEventListener(click, function(event) {console.log(event)
}) 事件对象包含的信息有
触发事件的目标元素target鼠标位置坐标clientX / clientY键盘按键值keyCode是否按下了 Ctrl/Shift 等修饰键阻止默认行为的方法preventDefault阻止事件传播的方法stopPropagation 三、事件对象的主要属性和方法
属性/方法描述target触发事件的真实元素原始触发者currentTarget绑定事件监听器的元素this 指向的对象type事件类型如 click、keydown 等preventDefault()阻止浏览器的默认行为如链接跳转、表单提交stopPropagation()阻止事件继续传播捕获或冒泡stopImmediatePropagation()阻止该事件的所有后续监听器执行bubbles表示该事件是否会冒泡cancelable表示是否可以取消该事件的默认行为eventPhase当前事件所处的阶段捕获、目标、冒泡
✅ 示例获取事件对象的基本信息
a hrefhttps://example.com idlink点击我/ascript
document.getElementById(link).addEventListener(click, function(event) {console.log(事件类型:, event.type) // clickconsole.log(目标元素:, event.target) // a 元素console.log(绑定事件的元素:, event.currentTarget) // 同上console.log(是否可阻止默认:, event.cancelable) // trueconsole.log(是否冒泡:, event.bubbles) // trueconsole.log(事件阶段:, event.eventPhase) // 2目标阶段
})
/script 四、target 与 currentTarget 的区别
这是开发者最容易混淆的一组属性。 理解差异
event.target真正触发事件的 DOM 元素可能是子元素。event.currentTarget绑定事件监听器的那个元素即 this。
✅ 示例说明
div idcontainerbutton idbtn点击我/button
/divscript
document.getElementById(container).addEventListener(click, function(event) {console.log(event.target:, event.target) // 可能是 button 或 divconsole.log(event.currentTarget:, event.currentTarget) // 始终是 container
})
/script 场景总结
使用场景推荐属性获取真正点击的元素event.target获取绑定事件的元素event.currentTarget 五、阻止默认行为preventDefault()
有些 HTML 元素自带默认行为比如
a 标签点击会跳转form 提交会刷新页面input typecheckbox 点击会切换状态
我们可以使用 event.preventDefault() 来阻止这些默认行为。
✅ 示例阻止链接跳转
document.querySelector(a).addEventListener(click, function(event) {event.preventDefault()alert(链接被点击但没有跳转)
}) 注意事项
不会影响事件传播适用于自定义行为替代默认行为的场景。 六、阻止事件传播stopPropagation()
默认情况下事件会在 DOM 树中进行传播捕获 → 目标 → 冒泡。我们可以通过 stopPropagation() 来阻止事件继续传播到其他节点。
✅ 示例阻止父级元素响应事件
div idparent父容器button idchild点击我/button
/divscript
document.getElementById(parent).addEventListener(click, () {console.log(父元素被点击)
})document.getElementById(child).addEventListener(click, function(event) {console.log(子元素被点击)event.stopPropagation()
})
/script 输出结果
子元素被点击 父元素不会收到事件通知。 七、彻底阻止事件stopImmediatePropagation()
如果你希望不仅阻止事件传播还想阻止当前元素上的其它监听器执行可以使用这个方法。
✅ 示例
const btn document.getElementById(btn)btn.addEventListener(click, function (e) {console.log(第一个监听器)e.stopImmediatePropagation()
})btn.addEventListener(click, function () {console.log(第二个监听器) // 不会执行
}) 效果
第一个监听器调用 stopImmediatePropagation() 后所有后续监听器都不会执行。 八、事件对象的实际应用场景
场景描述表单验证在 submit 事件中使用 preventDefault() 自定义提交逻辑弹窗关闭点击遮罩层关闭弹窗使用 target 判断是否点击了遮罩区域表格行点击获取点击的具体行数据鼠标坐标获取记录用户点击的位置多个监听器控制使用 stopImmediatePropagation() 控制优先级动态加载内容通过 target 判断点击的是哪个动态生成的元素 九、事件对象的兼容性注意事项
虽然现代浏览器都支持标准的 Event API但在一些旧版本浏览器如 IE中可能会存在兼容问题。
方法/属性IE 支持情况解决方案event.target✅ IE9event.currentTarget❌ IE8 及以下不支持event.preventDefault()✅ IE9event.stopPropagation()✅ IE9event.stopImmediatePropagation()❌ IE 不支持event.clientX / Y✅ 支持良好 推荐做法
使用现代浏览器开发若需兼容旧版浏览器建议使用框架如 jQuery封装兼容性处理或自行封装 polyfill。 十、总结对比表
特性推荐方式获取触发元素event.target获取绑定元素event.currentTarget阻止默认行为event.preventDefault()阻止事件传播event.stopPropagation()彻底阻止事件event.stopImmediatePropagation()获取鼠标坐标event.clientX / clientY推荐程度✅ 所有开发者必须掌握 十一、结语
感谢您的阅读如果你有任何疑问或想要分享的经验请在评论区留言交流
