1. 文档加载事件
- 此事件使用频率很高，务必掌握
- 文档加载完成之后会做的事情
1.1 ready()
- ready(): 表示文档结构已经加载完成（不包含图片等非文字媒体文件）
// 写法一 $(document).ready(function(){ //do something })
1.2 onload()
- onload(): 包含图片等文件在内的所有元素都加载完成。
- ready() 在onload()之前加载
// 写法二 window.onload = function(){ //do something }
2. 鼠标事件
HTML结构如下（记得先复制这个）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .div2,.mousemove{ width: 200px; height: 200px; background: orange; color: white; } .div2{ background: green; display: none; transition: all 0.5s; } </style> </head> <body> <h1>鼠标事件</h1> <h3>mousemove: 精交互</h3> <div class="mousemove" onmousemove= "bodyFn(this)"> mousemove </div> <h3>鼠标双击事件</h3> <button id="dbBtn" ondblclick="dbFn()" onclick="clickFn()">双击事件</button> <h3>鼠标悬浮事件</h3> <button id="btn">悬浮显示div</button> <div class="div2" id="div2"> 原有文字 </div> <h3>键盘事件</h3> <input placeholder="请输入" onkeyup="keyFn(event)"/> </body> </html>
2.1 鼠标悬浮事件
let btn= $my("btn"); let div2 = $my("div2"); // 鼠标悬浮事件 btn.onmouseover = function(){ div2.style.display = "block"; } // 鼠标离开事件 btn.onmouseout = function(){ div2.style.display = "none"; }
此处的 $my() 已经进行过封装，这样很方便，代码如下：
function $my(id){ return document.getElementById(id); }
2.2 点击事件
let timeId = null; // 单击事件 function clickFn(){ clearTimeout(timeId); timeId = window.setTimeout(function(){ console.log("单击事件"); }, 500) } // 双击事件 function dbFn(){ clearTimeout(timeId) console.log("双击事件") }
2.3 常用的回车事件
// 键盘事件 function keyFn(event){ console.dir(event); } // 监听窗口回车事件 document.onkeyup = function(event){ console.log(event.keyCode); if(event.keyCode === 13){ alert("回车事件") } }
3. 获取浏览器类型，手机机型（容易出问题的地方）
3.1 获取浏览器类型
let userAgent= navigator.userAgent; console.log(userAgent); if (userAgent.indexOf("Opera") > -1) { // 判断是否是Opera浏览器 console.log("Opera"); }; if (userAgent.indexOf("Firefox") > -1) { // 判断是否是Firefox浏览器 console.log("Firefox"); } if (userAgent.indexOf("Chrome") > -1) { // 判断是否是Chrome浏览器 console.log("Chrome"); } if (userAgent.indexOf("Safari") > -1) { // 判断是否是Safari浏览器 console.log("Safari"); } if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1) { console.log("IE"); // 判断是否是IE浏览器 };
3.2 判断手机机型（移动端解决兼容问题常用）
// 检测机型 安卓还是苹果 function getAdr(){ //获取机型信息 let type = navigator.userAgent; let isAndroid = type.indexOf("Android") > -1 || type.indexOf("Adr") > -1; return isAndroid; } console.log(getAdr()); // true为安卓 false为苹果
4. 事件冒泡与事件委托（面试重点）
HTML文件代码如下（记得先复制这个）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .div1{ width: 500px; height: 100px; border: 1px solid; } .p1{ background: orange; } </style> </head> <body> <h1>事件冒泡</h1> <div class="div1" onclick="divFn(this)"> div的文本 <p class="p1" onclick="pFn()">我是段落标签</p> </div> <h1>事件委托</h1> <ul id="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button onclick="addLi()">增加一个li</button> </body> </html>
4.1 阻止事件冒泡
- 事件冒泡：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window
- 显然，这是错误的，需要做处理
// 如果不做处理，点击p标签时会触发div的点击事件 function divFn(e){ console.log("div被点击了"); } function pFn(e){ console.log("段落被点击了"); window.event ? window.event.cancelBubble = true : // 阻止事件冒泡 e.stopPropagation(); }
4.2 事件委托
事件委托：把一个元素响应事件（点击事件、悬浮事件等等）的函数委托给另一个元素
举两个例子：
隔壁老王和老婆分手了，所以只能委托我去爱她老婆（好坏哦~）
放公司的快递到了，因为我请假爱老王老婆去了，所以只能委托前台签收一下
在JS中，这是一种好的处理方式：大大的减少dom操作，提升性能
不用事件委托，你得这么处理：
循环添加事件，显然，这是很蠢的
for (var i=0;i<aLi.length;i++) { aLi[i].onmouseover = function() { this.style.background = 'orange'; } aLi[i].onmouseout = function(){ this.style.background = ''; } }
事件委托的写法
let oUl = document.getElementById('ul1'); let aLi = oUl.children; oUl.onmouseover = function(ev){ let ev = ev || window.event; let oLi = ev.srcElement || ev.target; if(oLi.nodeName.toLowerCase() == 'li'){ oLi.style.background = 'orange'; } } oUl.onmouseout = function(ev){ let ev = ev || window.event; let oLi = ev.srcElement || ev.target; if(oLi.nodeName.toLowerCase() == 'li'){ oLi.style.background = ''; } } // 后面添加的子节点也会有添加的事件 function addLi(){ let html = document.createElement("div"); html.innerHTML = '<li>5</li>'; oUl.appendChild(html); }
