核心内容摘要
如何利用jQuery实现大文件的分片上传和断点续传？
核心事件绑定的 3 种方式推荐第 3 种事件绑定是操作 DOM 事件的基础核心是「给 DOM 节点关联一个触发后执行的函数」以下是从易到难、从旧到新的 3 种方式
行内绑定最原始不推荐直接在 HTML 标签里写on事件名把 JS 代码写在标签里耦合性高不利于维护。
html预览!-- 行内绑定点击事件 -- button onclickalert(点击了按钮)按钮1/button !-- 也可以调用外部函数 -- button onclickhandleClick()按钮2/button script function handleClick() { console.log(按钮2被点击); } /script
DOM 属性绑定简单但有缺陷通过 JS 给 DOM 节点的on事件名属性赋值缺点是一个事件只能绑定一个处理函数后绑定的会覆盖前一个。
html预览button idbtn3按钮3/button script const btn3 document.getElementById(btn
; // 绑定点击事件 btn
onclick function() { console.log(第一次绑定的点击事件); }; // 后绑定的会覆盖前一个 btn
onclick function() { console.log(第二次绑定的点击事件覆盖了之前的); }; /script
addEventListener推荐标准方式这是 W3C 标准的事件绑定方式支持一个事件绑定多个处理函数还能控制事件传播方式是开发中最常用的。
语法dom节点.addEventListener(事件名, 处理函数, 可选参数);事件名不带on比如click而非onclick处理函数触发事件后执行的函数可选参数布尔值false 冒泡阶段触发默认true 捕获阶段触发或配置对象。
html预览button idbtn4按钮4/button script const btn4 document.getElementById(btn
; // 绑定第一个点击事件 btn
addEventListener(click, function() { console.log(点击事件
; }); // 绑定第二个点击事件不会覆盖会依次执行 btn
addEventListener(click, function() { console.log(点击事件
; }); // 也可以绑定其他事件如鼠标移入、移出 btn
addEventListener(mouseenter, function() { btn
style.backgroundColor pink; }); btn
addEventListener(mouseleave, function() { btn
style.backgroundColor ; }); /script
事件解绑移除已绑定的事件绑定的事件如果不再需要要及时解绑避免内存泄漏不同绑定方式的解绑方法不同
解绑 DOM 属性绑定的事件直接把on事件名赋值为null即可javascript运行const btn3 document.getElementById(btn
; btn
onclick null; // 解绑点击事件
解绑 addEventListener 绑定的事件⚠️ 注意必须使用「绑定时候的同一个函数引用」匿名函数无法解绑html预览button idbtn5按钮5/button script const btn5 document.getElementById(btn
; // 先定义具名函数不能用匿名函数 function handleBtn5Click() { console.log(按钮5被点击); } // 绑定事件 btn
addEventListener(click, handleBtn5Click); // 解绑事件用同一个函数 btn
removeEventListener(click, handleBtn5Click); /script
事件对象获取事件的详细信息事件处理函数会自动接收一个「事件对象通常命名为e/evt」里面包含触发事件的所有信息比如点击位置、触发元素、是否按了快捷键等是开发的核心工具。
html预览button idbtn6按钮6/button div idbox stylewidth: 200px; height: 200px; background: #eee;/div script //