企业官网建设流程全解析

网站正在建设中不动产,504 wordpress,策划公司架构,网络做推广公司一、核心#xff1a;事件绑定的 3 种方式#xff08;推荐第 3 种#xff09; 事件绑定是操作 DOM 事件的基础#xff0c;核心是「给 DOM 节点关联一个触发后执行的函数」#xff0c;以下是从易到难、从旧到新的 3 种方式#xff1a; 1. 行内绑定#xff08;最原始事件绑定的 3 种方式推荐第 3 种事件绑定是操作 DOM 事件的基础核心是「给 DOM 节点关联一个触发后执行的函数」以下是从易到难、从旧到新的 3 种方式1. 行内绑定最原始不推荐直接在 HTML 标签里写on事件名把 JS 代码写在标签里耦合性高不利于维护。html预览!-- 行内绑定点击事件 -- button onclickalert(点击了按钮)按钮1/button !-- 也可以调用外部函数 -- button onclickhandleClick()按钮2/button script function handleClick() { console.log(按钮2被点击); } /script2. DOM 属性绑定简单但有缺陷通过 JS 给 DOM 节点的on事件名属性赋值缺点是一个事件只能绑定一个处理函数后绑定的会覆盖前一个。html预览button idbtn3按钮3/button script const btn3 document.getElementById(btn3); // 绑定点击事件 btn3.onclick function() { console.log(第一次绑定的点击事件); }; // 后绑定的会覆盖前一个 btn3.onclick function() { console.log(第二次绑定的点击事件覆盖了之前的); }; /script3. addEventListener推荐标准方式这是 W3C 标准的事件绑定方式支持一个事件绑定多个处理函数还能控制事件传播方式是开发中最常用的。语法dom节点.addEventListener(事件名, 处理函数, 可选参数);事件名不带on比如click而非onclick处理函数触发事件后执行的函数可选参数布尔值false 冒泡阶段触发默认true 捕获阶段触发或配置对象。html预览button idbtn4按钮4/button script const btn4 document.getElementById(btn4); // 绑定第一个点击事件 btn4.addEventListener(click, function() { console.log(点击事件1); }); // 绑定第二个点击事件不会覆盖会依次执行 btn4.addEventListener(click, function() { console.log(点击事件2); }); // 也可以绑定其他事件如鼠标移入、移出 btn4.addEventListener(mouseenter, function() { btn4.style.backgroundColor pink; }); btn4.addEventListener(mouseleave, function() { btn4.style.backgroundColor ; }); /script二、事件解绑移除已绑定的事件绑定的事件如果不再需要要及时解绑避免内存泄漏不同绑定方式的解绑方法不同1. 解绑 DOM 属性绑定的事件直接把on事件名赋值为null即可javascript运行const btn3 document.getElementById(btn3); btn3.onclick null; // 解绑点击事件2. 解绑 addEventListener 绑定的事件⚠️ 注意必须使用「绑定时候的同一个函数引用」匿名函数无法解绑html预览button idbtn5按钮5/button script const btn5 document.getElementById(btn5); // 先定义具名函数不能用匿名函数 function handleBtn5Click() { console.log(按钮5被点击); } // 绑定事件 btn5.addEventListener(click, handleBtn5Click); // 解绑事件用同一个函数 btn5.removeEventListener(click, handleBtn5Click); /script三、事件对象获取事件的详细信息事件处理函数会自动接收一个「事件对象通常命名为e/evt」里面包含触发事件的所有信息比如点击位置、触发元素、是否按了快捷键等是开发的核心工具。html预览button idbtn6按钮6/button div idbox stylewidth: 200px; height: 200px; background: #eee;/div script // 1. 点击按钮获取事件信息 const btn6 document.getElementById(btn6); btn6.addEventListener(click, function(e) { console.log(触发事件的元素, e.target); // 触发事件的DOM节点按钮本身 console.log(点击的坐标相对于页面, e.pageX, e.pageY); console.log(是否按了Ctrl键, e.ctrlKey); }); // 2. 常用阻止默认行为比如阻止a标签跳转、表单提交 const a document.createElement(a); a.href https://baidu.com; a.textContent 百度链接点了不跳转; document.body.appendChild(a); a.addEventListener(click, function(e) { e.preventDefault(); // 阻止默认行为跳转 console.log(点击了链接但没跳转); }); // 3. 常用阻止事件冒泡避免父元素触发相同事件 const box document.getElementById(box); box.addEventListener(click, function() { console.log(点击了div); }); btn6.addEventListener(click, function(e) { e.stopPropagation(); // 阻止事件冒泡到div console.log(点击了按钮不会触发div的点击事件); }); /script四、常用场景示例1. 点击按钮切换元素样式html预览p idtextHello DOM/p button idtoggleBtn切换样式/button script const text document.getElementById(text); const toggleBtn document.getElementById(toggleBtn); toggleBtn.addEventListener(click, function() { text.classList.toggle(active); // 切换active类 }); /script style .active { color: red; font-size: 20px; font-weight: bold; } /style2. 输入框实时监听输入内容html预览input typetext idinput placeholder输入内容... p idpreview/p script const input document.getElementById(input); const preview document.getElementById(preview); // 监听输入事件input input.addEventListener(input, function(e) { preview.textContent 你输入了${e.target.value}; }); /script总结事件绑定优先用addEventListener支持多函数绑定功能更全事件对象是核心通过e.target找触发元素、e.preventDefault()阻止默认行为、e.stopPropagation()阻止冒泡解绑事件要注意addEventListener绑定的事件必须用具名函数才能解绑避免内存泄漏。