diff --git a/03-JavaScript基础/06-JavaScript语法基础：面向对象和内置对象.md b/03-JavaScript基础/06-JavaScript语法基础：面向对象和内置对象.md
index f983fe0..f509122 100644
--- a/03-JavaScript基础/06-JavaScript语法基础：面向对象和内置对象.md
+++ b/03-JavaScript基础/06-JavaScript语法基础：面向对象和内置对象.md
@@ -181,7 +181,7 @@ console.log(o);
20180125_1834.png
-**json的介绍：**
+### json的介绍
> 对象字面量和json比较像，这里我们对json做一个简单介绍。
@@ -206,6 +206,31 @@ json举例：
另外，对象和json没有长度，json.length的打印结果是undefined。于是乎，自然也就不能用for循环遍历（因为便利时需要获取长度length）。
+**json遍历的方法：**
+
+json 采用 `for...in...`进行遍历，和数组的遍历方式不同。如下：
+
+
+```html
+
+```
+
+打印结果：
+
+20180203_1518.png
## 类和对象
diff --git a/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
new file mode 100644
index 0000000..b66c65d
--- /dev/null
+++ b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
@@ -0,0 +1,698 @@
+
+
+> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8413602.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+> 以下是正文。
+
+
+## 绑定事件的两种方式
+
+我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
+
+### 方式一：onclick
+
+举例：
+
+```html
+
+
+
+
+
+```
+
+点击按钮后，上方代码的打印结果：
+
+```html
+事件2
+```
+
+我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。
+
+### 方式二：addEventListener
+
+addEventListener()里的参数：
+
+- 参数1：事件名(注意，没有on)
+
+- 参数2：事件名(执行函数)
+
+- 参数3：事件名(捕获或者冒泡)
+
+举例：
+
+```html
+
+
+
+
+```
+
+点击按钮后，上方代码的打印结果：
+
+
+```html
+ 事件1
+ 事件2
+```
+
+我们可以看到，这种绑定事件的方式，不会层叠掉之前的事件。
+
+## 事件对象
+
+在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
+
+所有浏览器都支持event对象，但支持的方式不同。如下。
+
+（1）普通浏览器支持 event。比如：
+
+
+
+（2）ie 678 支持 window.event。
+
+于是，我们可以采取一种兼容性的写法。如下：
+
+```javascript
+ event = event || window.event; ////兼容性写法
+```
+
+代码举例：
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+
+### event 属性
+
+event 有很多属性，比如：
+
+
+
+由于pageX 和 pageY的兼容性不好，我们可以这样做：
+
+- 鼠标在页面的位置 = 被卷去的部分+可视区域部分。
+
+## Event举例
+
+### 举例1：鼠标跟随
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+![]()
+
+
+
+
+
+```
+
+实现效果：
+
+
+
+## event应用举例：获取鼠标距离所在盒子的距离
+
+关键点：
+
+```
+ 鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置
+```
+
+代码演示：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+实现效果：
+
+
+
+**举例：商品放大镜**
+
+代码实现：
+
+（1）index.html:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 静，能寒窗苦守；动，能点石成金。
+ 静，能寒窗苦守；动，能点石成金。
+ 静，能寒窗苦守；动，能点石成金。
+ 静，能寒窗苦守；动，能点石成金。
+ 静，能寒窗苦守；动，能点石成金。
+ 静，能寒窗苦守；动，能点石成金。
+
+
+
+
+```
+
+打印结果：
+
+20180203_1235.png
+
+### 2、scrollTop 和 scrollLeft
+
+网页被卷去的头部和左边的部分。
+
+比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。
+
+scrollTop 这个属性的写法要注意兼容性，如下。
+
+（1）如果文档没有 DTD 声明，写法为：
+
+```javascript
+ document.body.scrollTop
+```
+
+在没有 DTD 声明的情况下，如果不是这种写法，chrome浏览器认不出来。
+
+（2）如果文档有 DTD 声明，写法为：
+
+```javascript
+ document.documentElement.scrollTop
+```
+
+在有 DTD 声明的情况下，如果不是这种写法，IE678认不出来。
+
+综合上面这两个，就诞生了一种兼容性的写法：
+
+```javascript
+ document.body.scrollTop || document.documentElement.scrollTop //方式一
+
+ document.body.scrollTop + document.documentElement.scrollTop //方式二
+```
+
+另外还有一种兼容性的写法：`window.pageYOffset` 和 `window.pageXOffset`。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。
+
+综合上面的几种写法，为了兼容，不管有没有DTD，**最终版的兼容性写法：**
+
+```javascript
+ window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+```
+
+### 判断是否已经 DTD声明
+
+方法如下：
+
+```javascript
+ document.compatMode === "CSS1Compat" // 已声明
+ document.compatMode === "BackCompat" // 未声明
+```
+
+### 将 scrollTop 和 scrollLeft封装为 json
+
+
+将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+上方代码中，函数定义的那部分就是要封装的代码。另外还有一种较为复杂的封装方式：
+
+```javascript
+function scroll() { // 开始封装自己的scrollTop
+ if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
+ // 因为 window.pageYOffset 默认的是 0 所以这里需要判断
+ return {
+ left: window.pageXOffset,
+ top: window.pageYOffset
+ }
+ }
+ else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
+ return {
+ left: document.documentElement.scrollLeft,
+ top: document.documentElement.scrollTop
+ }
+ }
+ return { // 未声明 DTD
+ left: document.body.scrollLeft,
+ top: document.body.scrollTop
+ }
+}
+```
+
+## 获取 html 文档的方法
+
+获取title、body、head、html标签的方法如下：
+
+- `document.title` 文档标题；
+
+- `document.head` 文档的头标签
+
+- `document.body` 文档的body标签；
+
+- `document.documentElement` （这个很重要）。
+
+`document.documentElement`表示文档的html标签。也就是说，基本结构当中的 `html 标签`而是通过`document.documentElement`访问的，并不是通过 document.html 去访问的。
+
+
+## scrollTop 举例：固定导航栏
+
+
+完整版代码实现：
+
+（1）index.html：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 我是最顶端.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+ 生命壹号，永不止步.....
+
+
+
+
+```
+
+
+（2）tools.js:
+
+```javascript
+/**
+ * Created by smyhvae on 2015/12/8.
+ */
+
+//函数：获取scrollTop和scrollLeft的值
+function scroll() { // 开始封装自己的scrollTop
+ if (window.pageYOffset != null) { // ie9+ 高版本浏览器
+ // 因为 window.pageYOffset 默认的是 0 所以这里需要判断
+ return {
+ left: window.pageXOffset,
+ top: window.pageYOffset
+ }
+ }
+ else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
+ return {
+ left: document.documentElement.scrollLeft,
+ top: document.documentElement.scrollTop
+ }
+ }
+ return { // 未声明 DTD
+ left: document.body.scrollLeft,
+ top: document.body.scrollTop
+ }
+}
+
+```
+
+
+实现效果：
+
+
+20180203_1710.gif
+
+小火箭的图片资源：<20180203-Top.jpg>
+
+
+
+## window.scrollTo()方法举例：楼层跳跃（暂略）
+
+
+## 缓动框架封装
+
+### 1、缓动框架封装：同时设置多个属性
+
+这里我们通过`window.getComputedStyle`的方式获取属性值。
+
+**完整代码如下：**
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+实现效果：
+
+
+20180204_1440.gif
+
+
+### 2、上方的代码改进：清除定时器
+
+上方的代码中，我们还需做一下清除定时器的判断：只有所有的参数都到达指定位置了，我们就清除定时器。
+
+完整版代码如下：
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+实现效果同上。
+
+
+**### 3、进一步深入：如果有要同时执行讴多个动画时，就要用到回调函数（重要）**：
+
+上面的代码中，我们要做的动画是：
+
+```javascript
+ btnArr[0].onclick = function () {
+ var json = {"left": 100, "top": 200, "width": 300, "height": 300};
+ animate(div, json);
+ }
+```
+
+上面的代码是执行这一个动画，可如果要同时执行两个动画呢？一般人自然想到的是下面的写法：（错误的写法）
+
+
+```javascript
+ btnArr[0].onclick = function () {
+ var json1 = {"left": 100, "top": 200, "width": 300, "height": 300};
+ var json2 = {"left": 200, "top": 10, "width": 150, "height": 150};
+ animate(div, json1);
+ animate(div, json2);
+ }
+```
+
+但是这样写的话，第二个动画 json2 会把第一个动画 json1 **层叠掉**。也就是说，第一个动画直接就不执行了。效果如下：
+
+
+20180204_1526.gif
+
+这显然不是我们想看到的。
+
+如果我们想先执行第一个动画fn1()，再执行第二个动画fn2()的话，就要用到**回调函数**。意思是，将第二个动画fn2()作为回调函数即可。
+
+完整版代码如下：
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+
+20180204_1600.gif
+
+
+
+上方代码中，如果我们要先后完成两个动画，执行的代码是：
+
+
+```javascript
+ animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
+ animate(div, json2);
+ })
+```
+
+
+如果想要先后执行两个动画，那就以此类推：
+
+```javascript
+ animate(div, json1, function () { //第三个参数是回调，可以保证json1的动画执行结束后，再执行json2的动画
+ animate(div, json2,function () {
+ animate(div,json3);
+ });
+ })
+```
+
+
+
+
+**举例：仿360的右下角开机效果**
+
+代码实现：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+