三、事件高级
1、注册事件（绑定事件）
注册事件概述
给元素添加事件，称为注册事件或者绑定事件。
注册时间有两种方式：传统方式和方法监听注册方式
- 传统注册方式
- 利用 on 开头的事件 onclick
<button onclick= "alert('hi~')"></button>btn.onclick = function() {}- 特点：注册事件的唯一性
- 同一个元素同一个时间只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
- 方法监听注册方式
- w3c 标准 推荐方式
- addEventListener() 它是一个方法
- IE9 之前的 IE 不支持此方法，可使用 AttachEvent() 代替
- 特点：同一个元素同一个时间可以注册多个监听器
- 按注册顺序依次执行
addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
- type：事件类型字符串，比如 click、mouseover，注意这里不要带 on
- listener：事件处理函数，事件发生时，会调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>传统注册事件</button> <button>方法监听注册事件</button> <script> var btn = document.querySelectorAll('button'); // 1.传统方式 btn[0].onclick = function() { alert('hi'); } btn[0].onclick = function() { alert('hoe are you'); } // 2.事件侦听 // 同一个元素，同一个事件可以添加多个侦听器（事件处理程序） btn[1].addEventListener('click', function() { alert('123'); }) btn[1].addEventListener('click', function() { alert('456'); }) </script> </body> </html>
attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)
- eventNameWithOn：事件类型字符串，比如 onclick、onmouseover，这里要带 on
- callback：事件处理函数，当目标触发事件是回调函数被调用
注册事件兼容性解决方案
function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListen 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName. fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; } }
2、删除事件（解绑事件）
删除时间的方式
- 传统注册方式
eventTarget.onclick = null;- 方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);eventTarget.detachEvent(eventNameWithOn, callback);
删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 removeEventListener 方法 if(element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数 默认是 false } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; } }
3、DOM 事件流
事件流描述的是从页面中接收时间的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流
DOM 事件流分为3个阶段：
- 捕获阶段
- 当前阶段
- 冒泡阶段
注意:
- JS 代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type, listener[, useCapture]) 第三个参数如果是 ture，表示再事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
- 实际开发中很少使用事件捕获，更关注事件冒泡
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style> </head> <body> <div class="father"> <div class="son">son盒子</div> </div> <script> // 捕获阶段 var son = document.querySelector('.son'); son.addEventListener('click', function() { alert('son'); }, true); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, true); // 冒泡阶段 var son = document.querySelector('.son'); son.addEventListener('click', function() { alert('son'); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); document.addEventListener('click', function() { alert('document'); }) </script> </body> </html>
4、事件对象
什么是事件对象
eventTarget.onclick = function() {} eventTarget.assEventListener('click', function(event) {})event 对象表示时间的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event。
事件对象的兼容性方案
解决：
e = e || window.event;
事件对象的常见属性和方法
事件对象属性方法 说明 e.target 返回触发事件的对象（标准） e.srcElement 返回触发事件的对象（非标准 ie6~8 使用） e.type 返回事件的类型 比如 click mouseover（不带 on） e.cancelBubble 该属性阻止冒泡（非标准 ie6~8 使用） e.returnValue 该属性 阻止默认事件（默认行为）（非标准 ie6~8 使用）比如不让链接跳转 e.preventDefault() 该方法 阻止默认事件（默认行为）（标准）比如不让跳转链接 e.stopPropagation() 阻止冒泡（标准）
示例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> // 1. e,target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素） var div = document.querySelector('div'); div.addEventListener('click', function(e) { console.log(e.target); console.log(this); }) var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { // 绑定事件对象 console.log(this); console.log(e.currentTarget); // 谁触发，返回谁 console.log(e.target); }) // 了解兼容性 // div.onclick = function() { // e = e || window.event; // var target = e.target || e.srcElement; // console.log(target); // } // 跟 this 有个非常相似的属性 currentTarget ie6~8不认识 </script> </body> </html>示例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> <script> // 返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn(e) { console.log(e.type); } // 阻止默认的行为（事件） var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); // dom 标准写法 }) // 传统的注册方式 a.onclick = function(e) { // e.preventDefault(); // // 普通 // e.returnValue(); // return false 也能阻止默认行为 没有兼容性问题 return false; } </script> </body> </html>
5、阻止事件冒泡
阻止事件冒泡的两种方式
- 标准写法：利用事件对象里面的 stopPropagation() 方法
e.stopPropagation()- 非标准写法：IE 6~8 利用事件对象 cancaelBubble 属性
阻止事件冒泡的兼容性解决方案
if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; }
6、事件委托（代理、委派）
事件委托也称为时间代理，在jQuery里面称为事件委派
事件委托的原理：
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。事件委托的作用：
我们只操作了一次 DOM，提高了程序的性能。
7、常用的鼠标事件
禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单document.addEventListener('contextmenu', function(e) { e.preventDefault(); })禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) { e.preventDefault(); })
鼠标事件对象
MouseEvent鼠标事件对象；KeyboardEvent键盘事件对象。
鼠标事件对象 说明 e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标 e.pageX 返回鼠标相对于文档页面的 X 坐标（IE9+ 支持） e.pageY 返回鼠标相对于文档页面的 Y 坐标（IE9+ 支持） e.screenX 返回鼠标相对于电脑屏幕的 X 坐标 e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { height: 3000px; } </style> </head> <body> <script> // 鼠标事件对象 MouseEvent document.addEventListener('click', function(e) { // 1.鼠标在可视化窗口的位置 console.log(e.clientX); console.log(e.clientY); console.log('----------------'); // 2.鼠标在文档的位置 console.log(e.pageX); console.log(e.pageY); }) </script> </body> </html>
8、常用键盘事件
键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等 注意：
三个事件的执行顺序是：keydwon – keypress – keyup
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 1.keyup // document.onkeyup = function() { // console.log(1); // } document.addEventListener('keyup', function() { console.log(2); }) // 2.keydown document.addEventListener('keydown', function() { console.log(3); }) // 3.keypress document.addEventListener('keypress', function() { console.log(4); }) // 4. 三个事件的执行顺序：keydown -- keypress -- keyup </script> </body> </html>
键盘事件对象
键盘事件对象属性 说明 keyCode 返回该键的ASCII值 注意：onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
四、BOM 浏览器对象模型
1、BOM 概述
什么是 BOM
BOM（Brower Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象。其核心对象是 window。
BOM 的构成
window 对象是浏览器的顶级对象，它具有双重角色
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
注意：window 下的一个特殊属性 window.name
2、window 对象的常见事件
窗口加载事件
window.onload = function() {}; 或者 window.addEventListener('load', function() {});window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等）。
注意：
- 有了 window.onload 就可以把 JS、 代码写到页面上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
- window.onload 传统注册事件方式只能写一次，如果有多个，会议最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制·
document.addEventListener('DOMContentLoaded', function() {})DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。Ie9以上才支持。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // window.onload = function() { // var btn = document.querySelector('button'); // btn.addEventListener('click', function() { // alert('click to me'); // }) // } // window.onload = function() { // alert(1); // } window.addEventListener('load', function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('click to me'); }) }) window.addEventListener('load', function() { alert(1); }) document.addEventListener('DOMContentLoaded', function() { alert(2); }) // load 等页面元素全部加载完毕 // DOMContentLoaded 是 DOM 加载完毕直接执行，加载速度比 load 快 </script> <button>点击</button> </body> </html>
调整窗口大小事件
window.onresize = function() {}; window.addEventListener('resize', function() {});注意：
在开发响应式布局时可用到：window.innerWidth 当前屏幕的宽度
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <script> window.addEventListener('load', function() { var div = document.querySelector('div'); window.addEventListener('resize', function() { if (window.innerWidth <= 800) { div.style.display = 'none'; } else { div.style.display = 'block'; } }) }) </script> <div></div> </body> </html>
3、定时器
两种定时器
- setTimeout()
- setInterval()
setTimeout() 定时器
window..setTimeout(调用函数, [延迟的毫秒数]);setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
注意：
- window 可以省略
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种方式
- 延迟的毫秒数省略默认是0
setTimeout() 这个函数也称为回调函数 callback
停止 setTimeout() 定时器
window.clearTimeout(timeoutID);
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>点击停止定时器</button> <script> var btn = document.querySelector('button'); var timer = setTimeout(function() { console.log(1); }, 5000) btn.addEventListener('click', function() { clearTimeout(timer); }) </script> </body> </html>
setTnterval() 定时器
window.setInterval(回调函数, [间隔的毫秒数]);setInterval() 方法重复调用一个函数，每个一段时间，就去调用这个函数
注意：
- window 可以省略
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种方式
- 延迟的毫秒数省略默认是0
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> setInterval(function() { console.log(1); }, 1000) </script> </body> </html>
停止 setInterval() 定时器
window.clearInterval(intervalID);
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button class="begin">开启定时器</button> <button class="stop">停止定时器</button> <script> var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var timer = null; // 设置一个空对象 begin.addEventListener('click', function() { timer = setInterval(function() { console.log(1); }, 1000) }) stop.addEventListener('click', function() { clearInterval(timer); }) </script> </body> </html>
this
- 全局作用域或者普通函数种this指向全局对象window（定时器中的this指向window）
- 方法调用中谁调用this指向谁
- 构造函数种this指向构造函数的实例
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>点击</button> <script> // 1.全局作用域或者普通函数种this指向全局对象window（定时器中的this指向window） console.log(this); function fn() { console.log(this); } window.fn(); setTimeout(function() { console.log(this); }, 1000) // 2.方法调用中谁调用this指向谁 var o = { greet: function() { console.log(this); } } o.greet(); var btn = document.querySelector('button'); // btn.onclick = function() { // console.log(this); // } btn.addEventListener('click', function() { console.log(this); }) // 3.构造函数种this指向构造函数的实例 function Fun() { console.log(this); } var fun = new Fun(); </script> </body> </html>
４、JS 执行队列
JS 是单线程
同步和异步
同步任务
同步任务都在主线程上执行，形成一个执行栈
异步任务
JS 的异步函数是通过回调函数实现的。
- 普通事件，如 click、resize 等
- 资源加载，如 load、error 等
- 定时器，包括 setTimeout、setInterval 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）
JS 执行机制
- 先执行执行栈中的同步任务
- 异步任务（回调函数）放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断地重复获得任务、执行任务，再获取任务、执行任务，所以这种机制被称为事件循环（even loop）
5、location 对象
什么是 location 对象
window 对象提供的 location 属性用于获取或设置窗体地URL，并且可以用于解析 URL。
URL
统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。
URL 地一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
组成 说明 protocol 通信协议 常用的http,ftp,maito等 host 主机（域名） port 端口号 可选，省略时使用方案的默认端口 如http的默认地址端口为80 path 路径 由零个或多个 ‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址 query 参数 以键值对的形式，通过 &符号分隔开来fragment 片段 #后面内容 常见于链接 锚点
location 对象的属性
location对象属性 返回值 location.href 获取或者设置整个URL location.host 返回主机（域名） location…port 返回端口号（如果未写返回空字符串） location.pathname 返回路径 location.search 返回参数 location.hash 返回片段（#后面内容 常见于链接、锚点）
location 对象的方法
location对象方法 返回值 location,assign() 跟 href 一样，可以跳转页面（也称为重定向页面） location.replace() 替换当前页面，因为不记录历史，所以不能后退页面 location.reload() 重新加载页面，相当于刷新按钮或者 f5（如果参数为true，则强制刷新：ctrl+f5)
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>点击</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function() { // location.assign('http://www.baidu.com'); // location.replace('http://www.baidu.com'); location.reload(true); }) </script> </body> </html>
6、navigator 对象
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPad|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WenOS|Symbian|Windows Phone)/i))) { windows.location.href = ""; // 手机 } else { windows.location.href = ""; //电脑 }
7、history 对象
history对象方法 作用 back() 可以后退功能 forward() 前进功能 go(参数) 前进后退功能（参数如果是 1 则前进一个页面，如果是 -1 则后退一个页面）
4590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
