DOM事件

DOM事件DOM 事件是指浏览器中用户与页面交互或浏览器自身行为发生时触发的信号你可以通过 JavaScript 监听这些信号并执行相应的代码。通俗理解把 DOM 事件想象成通知场景触发的通知事件用户点击按钮click鼠标移到一个元素上mouseenter键盘按下一个键keydown页面加载完成load输入框内容改变input/change表单提交submit基本用法三种绑定方式1. HTML 属性方式不推荐htmlbutton οnclickalert(点击了)点我/button2. DOM 属性方式javascriptconst btn document.getElementById(myBtn); btn.onclick function() { alert(点击了); };3. 标准方式addEventListener推荐javascriptconst btn document.getElementById(myBtn); btn.addEventListener(click, function() { alert(点击了); }); 事件流捕获 → 目标 → 冒泡当你点击一个嵌套的元素时事件会经历三个阶段text1. 捕获阶段从外到内 document → html → body → div → button 2. 目标阶段到达目标 button被点击的元素 3. 冒泡阶段从内到外 button → div → body → html → documenthtmldiv idparent button idchild点我/button /divjavascript// 默认是冒泡阶段第三个参数 false 或不写 document.getElementById(parent).addEventListener(click, function() { console.log(父元素被点击了); }, false); // false 冒泡阶段 // 捕获阶段第三个参数 true document.getElementById(parent).addEventListener(click, function() { console.log(父元素捕获到了); }, true); // true 捕获阶段 阻止事件行为方法作用event.stopPropagation()阻止事件继续传播阻止冒泡或捕获event.preventDefault()阻止元素的默认行为如链接跳转、表单提交javascriptdocument.getElementById(link).addEventListener(click, function(event) { event.preventDefault(); // 阻止跳转 event.stopPropagation(); // 阻止冒泡 console.log(点击了链接但没有跳转); }); 常见 DOM 事件分类类别事件名触发时机鼠标click,dblclick,mousedown,mouseup,mousemove,mouseenter,mouseleave鼠标操作键盘keydown,keyup,keypress键盘操作表单input,change,submit,focus,blur表单交互窗口load,resize,scroll,unload页面/窗口变化触摸touchstart,touchmove,touchend移动端触屏剪贴板copy,cut,paste复制/粘贴