关于高级事件和 BOM 浏览器对象类型
高级事件
注册事件
- 给元素添加事件成为注册事件或者绑定事件
传统方式和方法监听注册方式
传统注册
- 利用 on 开头的事件 onclick
<button onclick = alert("hi~")></button>btn.onclick = function(){}特点：注册事件的唯一性
同一元素同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
w3c 标准 推荐方式
addEventListener() 是一个方法
addEventListener(type, listener[, useCapture])type 事件类型字符串，比如click mouseover 注意这里不要带on
listener 事件处理函数，事件发生时，会调用该监听函数
可选参数，是一个布尔值，默认是false
attachEvent 事件监听方式
- ie9 之前的版本支持
- 生产版本一般不使用
IE9 之前的 IE 不支持此方法
同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行
注册事件兼容性解决方法
- 先照顾大多数浏览器，再处理特殊浏览器
删除事件 解绑事件
删除事件的方式
传统注册方式
eventTarget.onclock = null;方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture])eventTarget.detachEvent(eventNameWithOn, callback)
- 删除事件的兼容性解决方案
DOM 事件流
- 描述的是从页面中接收事件的顺序
- 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意事项
- js 代码中只能执行捕获或者冒泡其中的一个阶段‘
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在冒泡阶段调用事件处理程序
事件对象
- event即为一个事件对象，可看作为一个形参
- 事件对象只有有了事件才会存在，是系统创建的，不需要传递参数
- 事件对象是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息
- 事件对象可以自己命名，比如 event ent 等等
- 事件对象的兼容性问题 ie 678 通过 window.event
事件对象的常见属性和方法
e.target
- 返回触发事件的对象 标准
e.srcElement
- 返回触发事件的对象 非标准
e.type
- 返回事件的类型 比如 click mouseover 不带 on
e.cancelBubble
- 该属性阻止冒泡 非标准 ie6-8 使用
e.returnValue
- 该属性阻止默认事件（默认行为） 非标准 ie6-8 使用 比如不让链接跳转
e.preventDefault()
- 该方法阻止默认事件（默认行为） 标准 比如不让跳转
e.stopPropagation()
- 阻止冒泡
阻止冒泡事件
阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到 DOM 最顶层节点
标准写法
- 利用事件对象里面的 stopPropagation() 方法
非标准写法
- IE6-8 利用事件对象 cancelBubble 属性
事件委托
- 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景
- 咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？
解决方案∶快递员把10个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势︰快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。
事件委托又称事件代理，在jQuery 里面成为事件委派
事件委托的原理
- 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
事件委托的作用
我们只操作了一次 DOM，提高了程序的性能
常用的鼠标事件
常用的鼠标事件
禁止使用鼠标右键菜单
- contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener("contextmenu", function(e){ e.preventDefault(); })禁止鼠标选中
document.addEventListener("selectstart", function(e){ e.preventDefault(); })鼠标事件对象
event 对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。
e.clientX: 返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY: 返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX: 返回鼠标相对于文档页面的 X 坐标 ID9+ 支持
e.pageY: 返回鼠标相对于文档页面的 Y 坐标 ID9+ 支持
e.screenX: 返回鼠标相对于电脑屏幕的 X 坐标
e.screenY: 返回鼠标相对于电脑屏幕的 Y 坐标
案例：移动的天使
- 鼠标不断的移动，使用鼠标移动事件：mousemove - 在页面中移动，给
document 注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理∶每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动圄片 ## 常用的键盘事件
- 鼠标不断的移动，使用鼠标移动事件：mousemove - 在页面中移动，给
document 注册事件
onkeyup: 某个键盘按键被松开时触发
onkeydown: 某个键盘按键被按下时触发
onkeypress: 某个键盘案件被按下时触发 但是它不识别功能键 比如 ctrl shift 箭头等
键盘事件对象
ASCII 表
keyCode
keyup和keydown 事件不区分字母大小写 a 和 A 得到的都是 65
keypress 事件 区分字母大小写
案例
按下 s 使得文本框获得焦点
模拟京东快递单号查询单号
- 注意：keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中
BOM 浏览器对象类型
BOM 概述
什么是 BOM
- BOM（Browser Object Model） 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window
- BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
- BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是 Netscape 浏览器标准的一部分。
BOM 的构成
BOM 比 DOM 更大，它包含 DOM。
window 对象是浏览器的顶级对象，它具有双重角色。
- 它是 JS 访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- 在调用的时候可以省略 window，前面学习的对话框都属于window对象方法，如 alert()、prompt()等
- 注意：window下的一个特殊属性 window.name
window 对象的常见事件
onload
- 最好使用addEventListener
窗口加载事件
document.addEventListener('DOMContentLoaded',function(){})
- DOMContentLoaded 事件触发时，当且仅当 DOM 加载完成，不包括样式表，图片，flash等
调整窗口大小事件
- resize
定时器
两种定时器
setTimeout()
- setTimeout(调用函数, [延迟的毫秒数])
- setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
- window 在调用的时候可以省略
- 延时时间单位为毫秒，但是可以省略，省略默认是 0
- 调用函数可以直接写函数，也可以写函数名
- 页面中可能有很多的定时器，我们经常给定时器加标识符
- 回调函数 callback()
setInterval(调用函数, 重复时间)
- window 可以省略
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串"函数名()"三种形式
- 间隔的毫秒省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
- 停止 setTimeout() 定时器
- window.clearTimeout(timeout)
JS执行机制
JS 是单线程
- JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的致命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
- 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
同步和异步
为了解决这个问题，利用多核 CPU 的计算能力，HTML 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
同步
前一个任务结束之后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
同步任务
- 同步任务都在主线程上执行，形成一个执行栈
异步
做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。
异步任务
- JS 的异步是通过回调函数实现的
- 1、普通事件，如 click、resize 等
- 2、资源加载，如 load、error 等
- 3、定时器，包括 setInerval、setTimeout 等
- 异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）
JS 执行机制
- 先执行执行栈中的同步任务。
- 异步任务（回调函数）放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
- 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。
Location
什么是 location 对象
- window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL。因为这个属性返回的是一个对象，所以我们将这个对象也成为 location 对象。
URL
- 统一资源定位符（Uniform Resource Locator, URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
- protocol://host[:port]/path/[?query]#fragment
location 对象的属性
location.href
- 获取或者设置 整个 URL
location.host
- 返回主机（域名）
location.port
- 返回端口号 如果未写返回 空字符串
location.pathname
- 返回路径
location.search
- 返回参数
location.hash
- 返回片段 #后面内容 常见于链接 锚点
location 对象方法
location.assign()
跟 href 一样，可以跳转页面（也称重定向页面）
- 记录浏览历史，可以实现后退功能
location.replace()
替换当前页面，因为不记录历史，所以不能后退页面
- 不记录历史，所以不能后退
location.reload()
- 重新加载页面，相当于刷新按钮或者 F5 如果参数为 true 强制刷新 CTRL + F5
navigation 对象
history 对象
back()
- 可以后退功能
forward()
- 前进功能
go(参数)
- 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退一个页面