前言

到了我最为感兴趣的部分了，要戒骄戒躁，毕竟还没出发多远，不能想着一步登天，稳扎稳打

笔记范围

从这节视频到那节视频结束

课程目标

• 能够说出Web APIs阶段与JavaScript语法阶段的关联性
• 能够说出什么是API
• 能够说出什么是Web API

Web APIs 和 JS基础关联性

JS基础阶段

• 学习的是ECMAScript标准规定的基本语法
• 为JS后面的课程打基础、做铺垫

Web APIs阶段

• Web APIs 是 w3c组织的标准
• Web APIs主要学习 DOM 和 BOM
• Web APIs 为JS 所独有的部分
• 需要使用JS基础课程内容

JS基础 学习的是ECMAScript基础语法，这为后面作铺垫

Web APIs是JS应用，大量使用JS基础语法做交互效果

API 和 Web API

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节

简单理解：API是程序员提供的一种工具，以便能够轻松的实现想要完成的功能

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）

现阶段主要针对于浏览器讲解常用的API，对浏览器做交互效果

如：想要浏览器弹出一个警示框，直接使用alert(‘弹出’)

MDN详细 API：https://developer.mozilla.org/zh-CN/docs/Web/API

因为Web API很多，所以称 这个阶段为Web APIs

• API是程序员提供的一个接口，帮助实现某种功能，会使用就好，不必纠结内部实现机制

• Web API主要针对浏览器提供的接口，主要针对浏览器做交互效果

• Web API一般有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

• 学习Web API可以结合前面学习内置对象方法的思路来学习

课程目标

• 能够说出什么是DOM
• 能够获取页面元素
• 能够给元素注册事件
• 能够操作DOM元素的属性
• 能够创建元素
• 能够操作DOM节点

DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C 已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中的所有标签都是元素，DOM中使用element表示
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

文档包含节点，节点包含元素

获取元素

DOM在实际开发中主要用来操作元素

获取页面中的元素可以使用以下几种方式：

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

注意： 多刷新几次，控制台输出就会发生变化（原因不详）

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象），获取的适合不包括父元素本身

知否知否，应是等你好久1
知否知否，应是等你好久2
知否知否，应是等你好久3
知否知否，应是等你好久4
生僻字
生僻字
生僻字

H5新增获取元素方式

document.getElementsByClassName('类名'); // 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回

盒子
盒子
首页
产品

获取特殊元素

获取body元素

document.body // 返回body元素对象
document.documentElement // 返回html元素对象

事件基础

JavaScript使我们有能力创建动态页面，而事件使可以被JavaScript侦测到的行为

简单理解：触发–响应机制

网页中每个元素都可以产生某些可以触发JavaScript的事件

在用户点击某按钮时产生一个事件，然后去执行某些操作

事件三要素：谁触发的，怎么触发的，触发的后果

唐伯虎

效果

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

分析事件三要素

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素的内容、属性等

改变元素内容

element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

显示当前系统时间
某个时间
123

效果

innerText和innerHTML的区别

我是文字123

常用元素的属性操作

刘德华张学友

效果如下

案例：分时显示不同图片，显示不同问候语

案例分析

1. 根据系统不同时间来判断，所以需要用到日期内置对象
2. 利用多分支语句来设置不同的图片
3. 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
4. 需要一个div元素，显示不同问候语，修改元素内容即可

上午好

表单元素的属性操作

按钮

仿京东显示隐藏密码明文案例

案例分析

1. 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
2. 一个按钮两个状态，点击一次，切换为文本框，继续点击一次，切换为密码框
3. 算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

效果

修改样式属性

可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式操作 和 element.className 类名样式操作

注意：

1. JS里面的样式采取驼峰命名法，如fontSize、backgroundColor
2. JS修改style样式操作，产生的是行内样式，css权重较高

如果直接对div元素使用元素选择器，会出现实际高度高于设定高度2倍

如下（导致原因不详，HTML 和 CSS知识忘了不少）

故而不直接对其进行元素选择，用类选择器

效果

仿淘宝关闭二维码案例

案例分析

1. 核心思路 利用样式的显示和隐藏完成，display:none隐藏元素，display:block显示元素
2. 点击按钮，就让这个二维码盒子隐藏起来

x

效果

循环精灵图

精灵图简介

案例分析

1. 精灵图图片排列有规律
2. 核心思路：利用for循环 修改精灵图片的 背景位置background-position

显示隐藏文本框内容

案例分析

1. 首先表单需要2个新事件，获得焦点 onfocus 失去焦点onblur
2. 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
3. 如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字

效果

通过className更改元素样式

• 如果样式修改较多，可以采取类名方式更改元素样式
• class是个关键字，所以使用className来操作元素类名属性
• className 会直接更改元素类名，覆盖掉原先的类名

文本

效果

密码框验证信息

案例分析

1. 首先判断的事件是表单失去焦点onblur
2. 如果输入正确则提示正确的信息颜色为绿色小图标
3. 如果输入不是6到16位，则提示错误信息颜色为红色小图标
4. 因为里面变化样式较多，采取className修改样式

    请输入6~16位密码

效果

操作元素总结

操作元素是DOM核心内容

开关灯

效果

关灯

排他思想

1. 所有元素全部清楚样式
2. 给当前元素设置样式

先排除其他，在设置自己的样式（排除他人，留下自己）

按钮1按钮2按钮3按钮4按钮5

效果

百度换肤

案例分析

1. 给一组元素注册事件
2. 给小图片利用循环注册点击事件
3. 当点击了这张图片，让页面背景改为当前的图片
4. 核心算法：把当前图片src路径取出来，给body作为背景即可

效果

表格隔行变色

仿照新浪财经网页效果 https://vip.stock.finance.sina.com.cn/mkt/

案例分析

1. 鼠标经过 onmouseover 鼠标离开 onmouseout
2. 核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
3. 注意：第一行不需要变换颜色

代码
名称
最新价
涨跌额
涨跌幅
买入
卖出
昨收
sh603061
N金海通
84.36
+25.78
+44.008%
84.36
0.00
58.58
sh688525
佰维存储
26.96
+4.49
+19.982%
26.96
0.00
22.47
sh688049
 
炬芯科技
 
36.51
 
+4.10
 
+12.650%
 
36.50
 
36.51
 
32.41
 
sh688230
芯导科技
70.08
+7.64
+12.236%
70.07
70.08
62.44
    

效果

表单全选取消全选

案例分析

1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
2. 下面复选框全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有复选框是否被选中，如果有一个没选中，上面全选就不选中
3. 可以设置一个变量，来控制全选是否选中

商品
价钱
iPhone8
8000
iPad Pro
5000
iPad Air
2000
Apple Watch
2000

效果

自定义属性的操作

获取属性值

• element.属性 获取属性值
• element.getAttribute(‘属性’)

区别：

• element.属性 获取内置属性值（元素本身自带的属性）
• element.getAtrribute(‘属性’) 主要获取自定义的属性（标准）

设置属性值

• element.属性 = ‘值’ 设置内置属性值
• element.setAttribute(‘属性’, ‘值’) 主要针对于自定义属性（内置属性和自定义属性都可）

移除属性

• element.removeAttribute(‘属性’)

tab栏切换

应用实例：https://dianqi.suning.com/?safp=

案例分析

1. Tab栏切换有两个大的模块
2. 上面的模块为导航栏，下面的模块为内容区
3. 下面的模块内容会随上面的选项卡变化，所以下面的模块变化写到点击事件里面
4. 规律：下面的模块显示内容和上面鼠标经过的选项卡一一对应，相互匹配
5. 核心思路：给上面的所有li添加自定义属性，属性值从0开始编号
6. 但鼠标经过li时，让内容模块显示对应的序号内容，其余隐藏（排他思想）

难点

1. 首先是鼠标经过时图片和文字的切换，尤其是图片，实现还不够完整
2. 因为写的样式有点多，所以最好一层层向下写好选择器
3. 仿照写的，所有源码（除了框架）都是一步步仿照来的，没有任何取巧，才制作出这样的效果
4. 默认会显示导航栏中第一个选项卡内容，这一点如果第一次实现需要了解下

效果

观察细点就会发现有点瑕疵，和原效果有差距，但确实尽力只能做到这一步了

源码如下：

今日必抢
空调
电视
热水器
冰箱
洗衣机
    
今日必抢模块内容
空调模块内容
电视模块内容
热水器模块内容
冰箱模块内容
洗衣机模块内容

最大收获就是有了仿照网页的经验，之前有，但都是跟着视频里老师一步步敲的，这次从头到尾都是独立分析的，其次对之前的知识进行了一次回顾，还阔以…

H5自定义属性

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

但有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性

H5规定自定义属性data-开头作为属性名且赋值，只能

获取H5自定义属性

• H5新增获取自定义属性的方法 element.dataset[‘自定义属性名’]，有兼容性问题ie11以上兼容

节点操作

获取元素通常使用两种方式

利用DOM提供的方法获取元素

• document.getElementById()
• document.getElementByTagName()
• document.querySelector()等

逻辑性不强，繁琐

利用节点层级关系获取元素

• 利用父子兄节点关系获取元素
• 逻辑性强，但兼容性稍差

这两种方式都可以获取元素节点，但节点操作更简单

网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示

HTML DOM树中所有节点均可通过JavaScript进行访问

一般来讲，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

• 元素节点 nodeType为1
• 属性节点 nodeType为2
• 文本节点nodeType为3（文本节点包含文字、空格、换行等）

在实际开发中，节点操作主要操作元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的父子兄层级关系

子节点获取

parentNode.childNodes(标准)和parentNode.children(非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回

虽然parentNode.children是一个非标准，但得到了各浏览器的支持，因而可以放心使用

我是div
我是span
我是li
我是li
我是li
我是li
我是li
我是li
我是li
我是li
x

获取第一个子节点和最后一个子节点

parentNode.firstChild返回第一个子节点，找不到则返回null。支持所有节点

parentNode.lastChild返回最后一个子节点，找不到则返回null。支持所有节点

parentNode.firstElementChild返回第一个子元素节点，找不到则返回null

parentNode.lastElementChild返回最后一个元素节点，找不到则返回null

注意： 这两个方法有兼容性问题，IE9以上才支持

实际开发

新浪下拉菜单

应用实例：https://www.sina.com.cn/

效果

案例分析

1. 导航栏里面的li都要有鼠标经过效果，所以需要循环注册鼠标事件
2. 核心原理：当鼠标经过li里面的 第二个孩子 ul显示，当鼠标离开，ul隐藏

源码如下

微博
私信
评论
@我
博客    
博客评论
未读提醒
    
邮箱
免费邮箱
VIP邮箱
企业邮箱
新浪邮箱客户端
    

兄弟节点

node.nextSibling返回当前元素的下一个兄弟节点，找不到返回null（包含所有节点）

node.previousSibling返回当前元素上一个兄弟节点，找不到则返回null(包含所有节点）

node.nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null

node.previousElementSibling返回当前元素上一个兄弟元素节点，找不到则返回null

注意： 这两个方法有兼容性问题，IE9以上才支持

如何解决兼容性问题

封装一个兼容性函数

function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;}}return null;
}

创建和添加节点

document.createElement('tagName')方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据需求动态生成的，所以也称为动态创建元素节点

node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

node.insertBefore(child,指定元素)方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

123

简单版发布留言

1. 核心思路：点击按钮之后，就动态创建一个p，添加到div里面
2. 创建p的同时，把文本域里面的值通过p.innerHTML赋值给p
3. 如果想要新的留言后面显示就用apendChild 如果想要前面的显示就用insertBefore

效果

真经亦难趣
表情
图片
视频
文章
发布
  

CSS源码

* {margin: 0;padding: 0;
}a {text-decoration: none;font-size: 14px;
}ul {list-style: none;
}/* 最外层 */
.wrap {width: 1000px;height: 245px;margin: 20px auto;border-radius: 4px;border: 1px solid #ddd;padding: 0 10px;
}.wrap .wrap-head {width: 100%;height: 40px;padding-top:4px;overflow: hidden;
}.wrap .wrap-head .head-logo {width: 40%;float: left;
}.wrap .wrap-head .head-logo img {width: 60px;height: 60px;
}.wrap .wrap-head .head-txt {padding: 20px 0;width: 60%;float: right;
}.wrap .wrap-head .head-txt a {color: #3C97EF;text-align: right;display: block;width: 100%;
}/* 内层设计，输入框 */
.wrap .main-txt {border: 1px solid #ccc;width: 99%;height: 125px;margin: 6px 0 0;padding: 5px;box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15) inset;
}.wrap .main-txt textarea {border: none;width: 100%;height: 66px;outline: none;resize: none;color: #333;
}/* 下层设计 */
.wrap .wrap-footer {width: 100%;height: 40px;margin: 6px 0;overflow: hidden;
}.wrap .wrap-footer .wrap-icon {width: 65%;float: left;margin-top: 10px;
}.wrap .wrap-footer .wrap-icon ul li {display: inline-block;margin-right: 15px;cursor: pointer;
}.wrap .wrap-icon a {font-size: 12px;color: #333;height: 20px;margin-left: 5px;display: block;width: 25px;float: right;line-height: 20px;
}.wrap .wrap-footer .wrap-icon a:hover {color: #eb7350;
}.wrap .wrap-footer .wrap-icon img {width: 20px;height: 20px;
}.wrap .wrap-footer .wrap-footer-btn {width: 35%;float: right;overflow: hidden;margin-top: 5px;
}.wrap .wrap-footer .wrap-footer-btn .release-btn {float: right;
}.wrap .wrap-footer .wrap-footer-btn button {position: relative;transition: background 400ms;color: #fff;background-color: #6A84DA;padding: 0.2rem 1rem;font-size: 1.2rem;overflow: hidden;outline: 0;border: 0;border-radius: 0.25rem;box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.3);cursor: pointer;z-index: 1;
}.wrap .wrap-footer .wrap-footer-btn button::before {content: "";position: absolute;z-index: -1;top: 50%;left: 50%;width: 1rem;height: 1rem;transform: translate3d(-50%,-50%,0) scale(0,0);border-radius: 0.4rem;background-color: #7886af;transform-origin: center;transition: ease-in-out .5s;
}.wrap .wrap-footer .wrap-footer-btn button:hover::before {transform: translate3d(-50%,-50%,0) scale(15,15);
}/* 后期添加的留言框 */
.show {width: 1000px;margin: 20px auto;display: none;
}.show .show-txt {width: 100%;color: #444;border-radius: 4px;
}.show .show-txt p {word-wrap: break-word;margin-top: 15px;padding-left: 15px;padding-right: 25px;border: 1px solid #ddd;position: relative;
}.show .show-txt p a {position: absolute;color: #aaa;top: 0;right: 0;
}.show .show-txt span {font-size: 12px;color: #808080;margin-top: 10px;
}

删除节点

node.removeChild(child)方法从DOM中删除一个子节点，返回删除的节点

删除留言

案例分析

1. 当把文本域里面的值赋值给p的时候，就多添加一个删除的链接
2. 需要把所有的链接获取过来，当点击链接的时候，删除当前链接所在的p

基于简单版发布留言案例进行修改

效果

真经亦难趣
表情
图片
视频
文章
发布
  

CSS源码

* {margin: 0;padding: 0;
}a {text-decoration: none;font-size: 14px;
}ul {list-style: none;
}/* 最外层 */
.wrap {width: 1000px;height: 245px;margin: 20px auto;border-radius: 4px;border: 1px solid #ddd;padding: 0 10px;
}.wrap .wrap-head {width: 100%;height: 40px;padding-top:4px;overflow: hidden;
}.wrap .wrap-head .head-logo {width: 40%;float: left;
}.wrap .wrap-head .head-logo img {width: 60px;height: 60px;
}.wrap .wrap-head .head-txt {padding: 20px 0;width: 60%;float: right;
}.wrap .wrap-head .head-txt a {color: #3C97EF;text-align: right;display: block;width: 100%;
}/* 内层设计，输入框 */
.wrap .main-txt {border: 1px solid #ccc;width: 99%;height: 125px;margin: 6px 0 0;padding: 5px;box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15) inset;
}.wrap .main-txt textarea {border: none;width: 100%;height: 66px;outline: none;resize: none;color: #333;
}/* 下层设计 */
.wrap .wrap-footer {width: 100%;height: 40px;margin: 6px 0;overflow: hidden;
}.wrap .wrap-footer .wrap-icon {width: 65%;float: left;margin-top: 10px;
}.wrap .wrap-footer .wrap-icon ul li {display: inline-block;margin-right: 15px;cursor: pointer;
}.wrap .wrap-icon a {font-size: 12px;color: #333;height: 20px;margin-left: 5px;display: block;width: 25px;float: right;line-height: 20px;
}.wrap .wrap-footer .wrap-icon a:hover {color: #eb7350;
}.wrap .wrap-footer .wrap-icon img {width: 20px;height: 20px;
}.wrap .wrap-footer .wrap-footer-btn {width: 35%;float: right;overflow: hidden;margin-top: 5px;
}.wrap .wrap-footer .wrap-footer-btn .release-btn {float: right;
}.wrap .wrap-footer .wrap-footer-btn button {position: relative;transition: background 400ms;color: #fff;background-color: #6A84DA;padding: 0.2rem 1rem;font-size: 1.2rem;overflow: hidden;outline: 0;border: 0;border-radius: 0.25rem;box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.3);cursor: pointer;z-index: 1;
}.wrap .wrap-footer .wrap-footer-btn button::before {content: "";position: absolute;z-index: -1;top: 50%;left: 50%;width: 1rem;height: 1rem;transform: translate3d(-50%,-50%,0) scale(0,0);border-radius: 0.4rem;background-color: #7886af;transform-origin: center;transition: ease-in-out .5s;
}.wrap .wrap-footer .wrap-footer-btn button:hover::before {transform: translate3d(-50%,-50%,0) scale(15,15);
}/* 后期添加的留言框 */
.show {width: 1000px;margin: 20px auto;display: none;
}.show .show-txt {width: 100%;color: #444;border-radius: 4px;
}.show .show-txt p {word-wrap: break-word;margin-top: 15px;padding-left: 15px;padding-right: 25px;border: 1px solid #ddd;position: relative;
}.show .show-txt p a {position: absolute;color: #aaa;top: 0;right: 0;
}.show .show-txt p span {font-size: 12px;color: #808080;margin-top: 10px;
}

复制节点

node.cloneNode()方法返回方法调用者（节点）的一个副本，该副本被称为克隆节点/拷贝节点

注意： 如果括号参数为空或false，则为浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

动态生成表格

案例分析

1. 因为表中的数据是动态的，需要JS动态生成，这里模拟数据，自己定义数据。数据采取对象形式存储
2. 所有数据都是放到tbody中的行里面
3. 行数对应对象数
4. 最后一列单元格是删除，需要单独创建单元格

姓名
科目
成绩
操作

效果

动态创建元素

• document.write()
• document.innerHTML()
• document.createElement()

注意：

document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

效果

点击
abc

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

innerTHML创建多个元素效率更高（不拼接字符串，采取数组形式拼接），结构稍微复杂，但效率更高

createElement()创建多个元素效率稍低一点，但结构更清晰

总结：不同浏览器下，innerHTML效率要比createElement高

DOM重点核心

对于dom操作，主要针对于元素的操作，有创建、增、删、改、查、属性操作、事件操作

课程目标

• 能够写出元素注册事件的两种方式
• 能够说出删除事件的两种方式
• 能够说出DOM事件流的三个阶段
• 能够利用事件对象完成跟随鼠标案例
• 能够封装阻止冒泡的兼容性函数
• 能够说出事件委托的原理
• 能够说出常用的鼠标和键盘事件

注册事件（绑定事件）

给元素添加事件，称为注册事件或绑定事件

注册事件有两种方式：传统方式和方法监听注册方法

传统注册方式

• 利用on开头的事件onclick
• btn.onclick = function() {}
• 特点：注册事件的唯一性
• 同一个元素同一事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面的注册的处理函数

方法监听注册方式

• w3c标准 推荐方式
• addEventListener() 它是一个方法
• IE9之前的IE不支持此方法，可使用attachEvent()代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

eventTarget.addEventListener(type, listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数：

• type: 事件类型字符串，比如click、mouseover，注意这里不要带on
• listener: 事件处理函数，事件发生时，会调用该监听函数
• useCapture: 可选参数，一个布尔值，默认是false

eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定事件时，指定的回调函数就会被执行

该方法接收两个参数：

• eventNameWithOn: 事件类型字符串，比如onclick、onmouseover，这里带on
• callback: 事件处理函数，当目标触发事件时回调函数被调用

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

传统注册事件方法监听注册事件ie9 attachEvent

效果

删除事件（解绑事件）

1
2
3

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

比如给一个div注册点击事件：

DOM事件流分为三个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

• 事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
• 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收过程

向水里仍一块石头，首先它会有一个下降的过程，这个过程可以理解为最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡

DOM事件流代码验证

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

注意：

1. JS代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick 和 attachEvent 只能得到冒泡阶段
3. addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序，如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
4. 实际开发中很少使用事件捕获，更关注事件冒泡
5. 有些事件是没有冒泡的，比如onblur、onfoucs、onmouseenter、onmouseleave
6. 事件冒泡有利有弊

son盒子

效果

事件对象

官方释义：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法

比如：

1. 谁绑定了这个事件
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

这个event是个形参，系统帮助我们设定为事件对象，不需要传递实参过去

当注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象本身的获取存在兼容性问题：

• 标准浏览器中时浏览器给方法传递参数，只要定义形参e就可以获取到
• 在IE6~8中，浏览器不会给方法传递参数；如果需要的话，需要到window.event中获取参数

解决：e = e || window.event;

123

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准 ie6~8使用
e.type	返回事件的类型 比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准 ie6~8使用
e.returnValue	该属性 阻止默认事件（默认行为）非标准 ie6~8使用 比如不让链接跳转
e.preventDefault()	该方法 阻止默认事件（默认行为）标准 比如不让链接跳转
e.stopPropagation()	阻止冒泡 标准

123
abc
abc
abc

阻止默认行为

123
百度

阻止事件冒泡

事件冒泡：开始时由最具体元素接收，然后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性：有利有弊

阻止事件冒泡

• 标准写法：利用事件对象里面的stopProgation()方法
• 非标准写法：IE6~8 利用事件对象cancelBubble属性

son盒子

事件委托

事件冒泡本身的特性，会带来坏处，也会带来好处，需要灵活掌握

事件委托称为事件代理，在jQuery里面称为事件委派

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托的作用：只操作一次DOM，提高了程序的性能

知否知否，点我应有弹框在手！
知否知否，点我应有弹框在手！
知否知否，点我应有弹框在手！
知否知否，点我应有弹框在手！
知否知否，点我应有弹框在手！

常用鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

我是一段不愿意分享的文字

获得鼠标在页面中的坐标

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

跟随鼠标的天使

案例分析

1. 鼠标不断的移动，使用鼠标移动事件：mousemove
2. 在页面中移动，给document注册事件
3. 图片要移动距离，而且不占位置，使用绝对定位即可
4. 核心原理：每次鼠标移动，都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片了

效果

常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时 触发 但不识别功能键 比如：ctrl shift 箭头等

注意：

1. 如果使用addEventListener不需要加on
2. onkeypress和前面2个的区别是：不识别功能键，如左右箭头、shift等
3. 三个事件的执行顺序：keydown --> keypress --> keyup

键盘事件对象

键盘事件对象 属性	说明
keyCode	返回改键的ASCII值

注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写

以下是搬运@梦里逆天 博主 所列出的按键与之对应的ASCII值

字母和数字键的键码值（keyCode）
按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘上的各键键码值（keyCode）				功能键键码值（keyCode）
按键	键码	按键	键码	按键	键码	按键	键码
0	96	8	104	F1	112	F9	120
1	97	9	105	F2	113	F10	121
2	98	*	106	F3	114	F11	122
3	99	+	107	F4	115	F12	123
4	100	Enter	108	F5	116
5	101	-	109	F6	117
6	102	.	110	F7	118
7	103	/	111	F8	119

控制键键码值（keyCode）
按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

多媒体键码值（keyCode）
按键	键码	按键	键码
音量加	175	浏览器	172
音量减	174	邮件	180
停止	179	搜索	170
静音	173	收藏	171

效果

注意：

• onkeydown 和 onkeyup 不区分字母大小写，onkeypress区分字母大小写
• 实际开发中，更多的使用keydown和keyup，它能识别所有的键（包括功能键）
• keypress不识别功能键，但keyCode属性能区分大小写，返回不同的ASCII值

模拟京东按键输入内容案例

案例分析

模拟京东快递单号查询

案例分析

注意： keydown和keypress在文本框里面的特点：两个事件触发的时候，文字还没有落入文本框中

应用实例：

效果：

源码如下：

123

课程目标

• 能够说出什么是BOM
• 能够知道浏览器的顶级对象window
• 能够写出页面加载事件以及注意事项
• 能够写出两种定时器函数并说出区别
• 能够说出JS执行机制
• 能够使用location对象完成页面之间的跳转
• 能够知晓navigator对象涉及的属性
• 能够使用history提供的方法实现页面刷新

BOM概述

BOM(Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

Bom 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

BOM比DOM更大且包含DOM

window对象是浏览器的顶级对象，它具有双重角色

1. 它是JS访问浏览器窗口的一个接口
2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变window对象的属性和方法

在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等

注意： window下的一个特殊属性window.name

窗口加载事件

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以上支持

如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

调整窗口大小事件

window.onresize = function(){} 和 window.addEventListener('resize', function() {});

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数

注意

• 只要窗口大小发生像素变化，就会触发这个事件
• 经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽带

定时器

window对象提供了2个非常好用的方法-定时器

• setTimeout()
• setInterval()

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout()方法用于设置一个定时器，该定时器在到点儿后执行调用函数

** 注意**

• window可以省略
• 调用函数可以直接写函数或者函数名
• 延迟的毫秒数默认为0，如果写，必须是毫秒
• 定时器可能有很多，经常给定时器赋值一个标识符

回调函数

setTimeout()这个调用函数也称为回调函数callback

普通函数是按照代码顺序直接调用，而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数

清除定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

注意

• window可以省略
• 里面的参数就是定时器的标识符

效果

点击停止定时器

setInterval

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意

• window可以省略
• 这个调用函数可以直接写函数或函数名
• 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
• 定时器可能有很多，经常给定时器赋值一个标识符

定时器

案例分析

1. 这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
2. 三个黑色盒子里面分别存放时分秒
3. 三个黑色盒子利用innerHTML放入计算的小时分钟秒数
4. 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
5. 最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

应用实例

https://www.jd.com/

效果

123

清除定时器

效果

开启定时器停止定时器

发送短信案例

案例分析

1. 按钮点击之后，会禁用disabled为true
2. 同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改
3. 里面秒数是有变化，因此需要用到定时器
4. 定义一个变量在定时器里面，不断递减
5. 如果变量为0，说明到了时间，需要停止定时器且复原按钮为初始状态

效果

手机号码： 发送

this指向问题

点击

JS的同步和异步

JS是单线程

JavaScript语言的一大特点就是单线程，即同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。如对某个DOM元素进行添加和删除操作，不能同时进行，应先进行添加，之后再删除

单线程就意味着，所有任务需要排队，前一个任务结束，后一个任务才执行，这样导致的问题就是：如果JS执行时间较长，这样就会造成页面渲染不连贯又或者页面渲染加载阻塞

利用多核CPU计算能力，HTML5提出Web worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现了同步和异步

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的

异步

在做一件事情时，因为这件事情花费很长时间，在做这件事的同时，还可以去处理其他事情

本质区别：在流水线上各个流程执行顺序不同

同步任务

同步任务都在主线程上执行，形成一个执行栈

异步任务

JS的异步是通过回调函数实现的

一般而言，异步任务有以下三种类型：

• 普通事件，如click、resize等
• 资源加载，如load、error等
• 定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

JS执行机制

• 先执行执行栈中的同步任务
• 异步任务（回调函数）放入任务队列中
• 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

location对象

window对象提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以将这个属性称为location对象

统一资源定位符（Uniform Resource Locator,URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，包含的信息指出文件的位置以及浏览器应该怎么处理它

URL的一般语法格式为

protocol://host[:port]/path/[?query]#fragment

实例

http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议 常用的http、ftp、maito等
host	主机（域名）
port	端口号 可选 省略时使用方案的默认端口 如http的默认端口为80
path	路径 由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数 以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容 常见于链接 锚点

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

点击

navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值

下面前端代码可以判断用户哪个终端打开页面，实现跳转

history对象

window对象提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过URL

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面

点击我前往列表页前进

点击我前往首页后退

结语

终于学完了这部分内容，进度虽然缓慢，但还好效果还是可以的，之后就放慢看视频进度，研究研究油猴脚本书写

我知道世界是多元的，因而想用一生去证实，人间是否留有我驻足之地