2026/6/20 11:06:50
网站建设
项目流程
如何建设局域网内部网站,wordpress出选择题,淘宝客 网站 备案,手机建站模版#x1f3ac; HoRain云小助手#xff1a;个人主页 #x1f525; 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站#xff0c;性价比超高#xff0c;大内存超划算#xff01;… HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍JavaScript 事件事件流模型事件处理方式1. HTML 内联属性2. DOM 属性绑定3. addEventListener推荐方案常见事件类型事件委托事件对象常用方法事件处理最佳实践JavaScript 事件JavaScript 事件是 HTML 元素上可被 JavaScript 侦测并响应的用户行为或页面状态变化通过事件处理程序实现网页动态交互功能。事件流模型事件执行遵循 DOM 事件流模型包含三个阶段事件捕获阶段从window向下传递直到目标元素的父级目标阶段事件到达实际触发事件的元素event.target事件冒泡阶段从目标元素向上冒泡依次触发祖先元素上的监听器默认情况下事件处理程序在冒泡阶段执行addEventListener的第三个参数默认为false事件处理方式1. HTML 内联属性button onclickhandleClick()点击我/button优点简单直观缺点混合 HTML 和 JavaScript难以维护2. DOM 属性绑定const btn document.getElementById(myButton); btn.onclick function(event) { console.log(按钮被点击, event.target); };优点支持动态修改和移除缺点每个事件类型只能绑定一个处理程序3. addEventListener推荐方案const btn document.getElementById(myButton); btn.addEventListener(click, function(event) { console.log(按钮被点击, event.target); }, { capture: false, once: false, passive: false });优点支持同时绑定多个处理程序精确控制事件阶段常见事件类型事件类型说明示例用户界面事件页面加载、卸载和调整大小load,unload,resize,scroll焦点事件元素获得或失去焦点blur,focus,focusin,focusout鼠标事件鼠标交互click,mouseover,mouseout,mousedown,mouseup键盘事件键盘输入keydown,keyup,keypress输入事件输入框内容变化input,change表单事件表单操作submit,reset触摸事件触摸屏交互touchstart,touchmove,touchend事件委托事件委托是利用事件冒泡特性将事件监听器添加到父元素上而不是每个子元素上document.querySelector(#list).addEventListener(click, function(event) { if(event.target.tagName LI) { event.target.classList.toggle(selected); } });优点减少内存占用监听器数量减少自动支持动态添加的元素提高代码可维护性事件对象常用方法方法说明event.preventDefault()阻止事件的默认行为如表单提交event.stopPropagation()阻止事件继续传播阻止冒泡event.target真正触发事件的元素event.currentTarget绑定监听器的元素与this相同事件处理最佳实践优先使用addEventListener而非内联属性或 DOM 属性绑定为动态元素使用事件委托使用event.target.matches()进行精确目标匹配对频繁触发的事件如scroll、resize使用节流throttle优化性能理解 JavaScript 事件机制是构建交互式 Web 应用的基础合理运用这些机制可以大大提高应用的性能和可维护性。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧