## 點擊藍色塊
```
<style>
#box1 {
width: 300px;
height: 300px;
background-color: pink;
}
#box2 {
width: 200px;
height: 200px;
background-color: black;
}
#box3 {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<input type="button" value="按鈕" id="btn">
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var arr = [box1, box2, box3];
for (let i = 0; i < arr.length; i++) {
var box = arr[i];
box.onclick = function (e) { //系統調用的,系統傳入e
e = e || window.event;
console.log(e.eventPhase); //事件階段
var target = e.target || e.srcElement;
console.log(target); //獲取真正觸發事件的對象
console.log(e.currentTarget);//和this一樣,獲取事件處理函數所屬的對象
console.log(this);
}
}
</script>
```

- 函數
- arguments
- 作用域
- 作用域鏈
- 預解析
- 對象
- 簡單類型和復雜類型
- 內置對象
- Web API
- DOM
- 獲取頁面元素
- 注冊事件及應用
- 點擊切換圖片
- 非表單元素的屬性
- 取消a標簽的默認行為
- 美女輪播圖
- innerText和innerHTML
- 表單元素的屬性
- 下拉框選中項
- 全選反選
- 自定義屬性
- mouseenter和mouseover區別
- 樣式操作及應用
- 操作樣式
- 鏈式操作原理
- 顯示隱藏二維碼
- 高亮正在輸入的文本框
- 隔行變色
- tab欄切換
- 常見dom操作
- 節點介紹及應用
- 模擬DOM
- 兄弟節點
- 獲取子節點
- 菜單
- 父子節點
- 動態創建元素及應用
- 動態創建元素
- 動態創建列表
- 動態創建表格
- 動態創建元素性能對比
- 常用元素操作方法
- 事件詳解
- 注冊事件的幾種方式
- addEventListener
- 移除事件
- 事件的三個階段
- 事件委托
- 事件對象1
- 事件對象2
- 事件對象3
- 圖片跟著鼠標移動
- 獲取鼠標在盒子中的坐標
- 獲取頁面滾動的距離
- 取消默認行為的執行
- 阻止事件冒泡
- input只能輸入數字
- BOM
- 概述
- 對話框
- JS加載詳解
- setTimeout
- setInterval
- 簡單動畫
- location
- history
- UserAgent
- offset,client,scroll
- offset系列屬性
- client系列屬性
- scroll系列屬性
- 拖拽案例
- 彈出登錄窗口
- 動畫函數封裝
- 高級
- 瀏覽器的組成
- 面向對象
- 概述
- 面向對象開發過程
- 創建對象
- new的時候發生了什么
- 靜態成員和實例成員
- 構造函數的原型
- 對象的原型
- 三者關系
- 原型鏈
- 屬性查找規則
- 注意點
- 擴展內置對象
- 繼承
- 原型繼承
- call
- 借用構造函數
- 組合繼承
- 函數進階
- 函數聲明和函數表達式
- 函數也是對象
- 函數調用方式和this指向
- call,bind,apply改變函數中的this
- AJAX
- 基礎知識
- 原生AJAX
- 同步與異步
- JS異步原理
- Node
- 模塊化
- 概述
- 模塊成員導出詳解
- ES6
- 解構賦值
- 字符串擴展
- 函數拓展
- 箭頭函數
- 類與繼承
- export default 和export
- Promise
- 回調函數
- 回調地獄
- promise基本概念
- Promosew實例只要被創建就立即執行里面的異步方法
- 使用then指定成功和失敗的回調
- promise正確使用方式
- 捕獲異常的兩種方式
- NPM和NRM
- WebPack
- 概述
- plugin配置和使用
- loader配置和使用
- webpack和vue結合
- webpack中導入和script標簽
- vue中結合render函數渲染指定組件到容器中
- 總結
- vue-router
- 跨域
- json
- jQuery
- 概述
- 注意
- dom對象和jquery對象互轉
- 選擇器
- 基礎選擇器
- 綁定事件
- 觸發器
- 事件對象
- 事件冒泡
- 取消事件冒泡
- HTML5新增API
- 檢測網絡狀態
- 全屏
- 文件讀取
- 地理定位
- 百度地圖名片
- 拖放
- 本地存儲
- 應用緩存
- 多媒體播放器布局