## 事件委托

+ 什么是事件委托

+ 如何實(shí)現(xiàn)事件委托

+ 事件委托優(yōu)點(diǎn)

## 阻止冒泡

+ 什么是冒泡 && 什么時(shí)候需要實(shí)現(xiàn)冒泡

+ 如何實(shí)現(xiàn)

## 阻止默認(rèn)事件

+ 什么是默認(rèn)事件

+ 如何實(shí)現(xiàn)

+ 獲取目標(biāo)元素

+ 獲取父元素

+ 獲取元素的標(biāo)簽名

## this關(guān)鍵字

+ this出現(xiàn)在事件處理函數(shù)里面 this代表的是當(dāng)前的事件源

+ 普通函數(shù)內(nèi)部的this看調(diào)用

+ 箭頭函數(shù)內(nèi)部的this看定義

+ 可以強(qiáng)制修改一個(gè)普通函數(shù)內(nèi)部的this， 有三種方式可以修改一個(gè)函數(shù)內(nèi)部的this指向

? ? - call

? ? ? ? + 函數(shù)名.call(新this的指向, 參數(shù)01, 參數(shù)02,...)

? ? - apply

? ? ? ? + 函數(shù)名.apply(新this的指向, [參數(shù)01, 參數(shù)02, ...])

? ? - bind

? ? ? ? + var 新函數(shù) = 函數(shù).bind(新this的指向)

? ? ? ? + 新函數(shù)(參數(shù)01, 參數(shù)02, ...)

+ call、apply、bind的區(qū)別

? ? + call、apply在改變函數(shù)this的同時(shí)會(huì)調(diào)用這個(gè)函數(shù) bind只會(huì)改變this 不會(huì)調(diào)用函數(shù) 會(huì)返回一個(gè)修改this之后的新函數(shù) 需要自己去調(diào)用這個(gè)新函數(shù)

? ? + call和apply的傳參方式不一樣

## es6

+ ECMAscript 簡(jiǎn)稱 es ?標(biāo)準(zhǔn)語(yǔ)法

+ es5

+ es1.0 ?1997

+ es2.0 ?1998

+ es3.0 ?1999

+ es5.0 ?2008 es3.0-->es3.1-->es5

+ 2015 年 6 月 ?es6 ?官方稱呼這個(gè)版本es2015

+ 2016 ?es2016 --> es7

+ ...

+ 2023 ?es2023 --> es14

### let和const

+ let是聲明變量的一種新方式

+ let和var的區(qū)別

? ? 1. 作用域不一樣

? ? 2. let不會(huì)聲明提升 var有聲明提升(不能提前使用let變量)

? ? 3. let不允許重復(fù)聲明（let聲明的時(shí)候看有沒(méi)有定義過(guò)）

? ? 4. 暫時(shí)性死區(qū)

+ const是聲明常量的一種方式

+ const有沒(méi)有塊級(jí)作用域概念

### 箭頭函數(shù)

+ 定義函數(shù)

? ? - es5(普通函數(shù) 帶function函數(shù))

? ? ? ? + 聲明式定義

? ? ? ? ? ? ```js

? ? ? ? ? ? ? ? function 函數(shù)名(形參,形參){

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ```

? ? ? ? - 賦值式定義

? ? ? ? ? ? ```js

? ? ? ? ? ? ? ? var 函數(shù)名 = function(形參,形參){

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ```

? ? - es6 箭頭函數(shù)

? ? ? ? ```js

? ? ? ? ? ? var 函數(shù)名 = (形參,形參) => {

? ? ? ? ? ? }

? ? ? ? ```

+ 箭頭函數(shù)簡(jiǎn)寫

? ? - 當(dāng)箭頭函數(shù)內(nèi)部的代碼`只有一行`的時(shí)候 ?花括號(hào)可以省略不寫

? ? - 當(dāng)箭頭函數(shù)`只有一個(gè)形參`的時(shí)候 小括號(hào)可以省略不寫

+ 箭頭函數(shù)解決this指向不固定的問(wèn)題

+ 箭頭函數(shù)和普通函數(shù)的區(qū)別

? ? 1. 內(nèi)部的this指向不一樣

? ? 2. 箭頭函數(shù)內(nèi)部this無(wú)法修改

? ? 3. 箭頭函數(shù)內(nèi)部沒(méi)有arguments

? ? 4. 箭頭函數(shù)無(wú)法當(dāng)做構(gòu)造函數(shù)

### 函數(shù)默認(rèn)參數(shù)

### 函數(shù)的剩余參數(shù)rest parmater

### 解構(gòu)賦值

+ 主要用于取出數(shù)組或者對(duì)象里面的值將它賦值給一個(gè)變量

+ var [變量名, 變量名, ...] = 數(shù)組名

+ var {鍵名:別名, 鍵名: 別名, 鍵名} = 對(duì)象名

### 展開運(yùn)算符

+ `...`

+ 用于合并數(shù)組和對(duì)象

### 模塊化語(yǔ)法

+ 模塊： 在項(xiàng)目開發(fā)中每一個(gè)文件就是一個(gè)獨(dú)立的模塊 由多個(gè)模塊組成一個(gè)整體 構(gòu)成一個(gè)項(xiàng)目

+ 模塊化管理： 將我們獨(dú)立每一個(gè)文件進(jìn)行整合

+ css模塊化

+ js模塊化（esm） es6 module語(yǔ)法

? ? + 導(dǎo)入

? ? ? ? - 單個(gè)導(dǎo)入

? ? ? ? ```js

? ? ? ? ? ? import {a, fn} from '路徑'

? ? ? ? ```

? ? ? ? - 默認(rèn)導(dǎo)入

? ? ? ? ```js

? ? ? ? ? ? import 變量名 from '路徑'

? ? ? ? ```

? ? + 導(dǎo)出

? ? ? ? - 單個(gè)導(dǎo)出

? ? ? ? ```js

? ? ? ? ? ? export var a = 1

? ? ? ? ? ? export const fn = ()=>{}

? ? ? ? ```

? ? ? ? - 默認(rèn)導(dǎo)出

? ? ? ? ```js

? ? ? ? ? ? export default {

? ? ? ? ? ? ? ? aaa: 1,

? ? ? ? ? ? ? ? fnn: ()=>{}

? ? ? ? ? ? }

? ? ? ? ```

+ `Cannot use import statement outside a module` 導(dǎo)入了一個(gè)js 這個(gè)js用到了import命令 這個(gè)命令瀏覽器是不識(shí)別的 需要告訴瀏覽器 我是使用了import命令 你要幫我解析 在加載這個(gè)js的script標(biāo)簽里面添加一個(gè)`type=module`

+ `Access to script at 'file:///D:/%E6%95%99%E5%AD%A6/2302/week03/day04/%E4%BB%A3%E7%A0%81/js%E6%A8%A1%E5%9D%97%E5%8C%96/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.` 一旦開始type=module模式 本地打開的網(wǎng)頁(yè)不支持 需要在服務(wù)器環(huán)境打開這個(gè)頁(yè)面 需要安裝live server利用live server打開這個(gè)頁(yè)面即可

+ 雖然此時(shí)我們已經(jīng)可以成功在一個(gè)js里面加載另一個(gè)js 但是注意每一個(gè)js都相當(dāng)于是一個(gè)獨(dú)立的作用域 單純的導(dǎo)入只是將文件執(zhí)行了 并不能說(shuō)就能夠使用導(dǎo)入文件里面的數(shù)據(jù)

+ 如果我們想要使用導(dǎo)入文件里面的數(shù)據(jù) 就要導(dǎo)入文件要導(dǎo)出 ?在數(shù)據(jù)前面加上`export`就導(dǎo)出了這個(gè)數(shù)據(jù)

+ 導(dǎo)入的時(shí)候需要接受數(shù)據(jù)

### 作用域

+ es5作用域

? ? - 全局作用域

? ? - 局部作用域

+ es5變量

? ? - 全局變量

? ? - 局部變量

+ es6作用域

? ? - 全局作用域

? ? - 局部作用域

? ? - 塊級(jí)作用域

? ? ? ? + 花括號(hào)內(nèi)部

+ es6變量

? ? - 全局變量

? ? - 局部變量

? ? - 塊級(jí)變量

? ? ? ? + 在塊級(jí)作用域里面用`let聲明`的變量被稱為塊級(jí)變量 塊級(jí)變量只能在當(dāng)前塊級(jí)作用域內(nèi)部使