㈠ 想學web前端需要學什麼知識
隨著互聯網的發展，各種小程序、APP以及很多的互聯網+創業公司的興起，對現在前端工程的要求也越來越高，如何適應目前IT行業時代的發展趨勢，web前端工程師又需要掌握那些技能呢？
一、HTML5+CSS3
HTML是網頁的主要組成部分，網頁的本質就是HTML，是用來製作超文本文檔的簡單標記語言；CSS樣式是對HTML語言的有效補充，通過使用CSS樣式，便於頁面的修改以及頁面風格的統一，還可以減少頁面的體積，通過HTML和CSS完成靜態頁面的布局。HTML5+CSS3是HTML+CSS的更新，增加了很多非常實用的功能。這部分主要是從PC端和移動端兩方面掌握整體的頁面布局技術，並且配合項目實戰操練、學以致用。
二、JS交互設計
這一部分主要掌握JS的基本語法、演算法和高級語法，熟練使用面向對象的思想進行DOM編程，通過JQuery經典案例學習精通JQuery技術。
通過以上介紹，相信大家都了解了web前端開發需要學習的內容了，現在隨著行業而發展，對前端的要求也越來越高，對高端人才的需求也越來越多，只有大家掌握的知識越多，掌握的技能越全面，越好，之後的選擇權才會更多，發展前景更好。
㈡ 關於前端的幾個知識點，勞煩知友幫忙解答一下
1、DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
document.documentElement 返迴文檔的根節點<html>
document.body <body>
document.activeElement 返回當前文檔中被擊活的標簽節點(ie)
event.fromElement 返回滑鼠移出的源節點(ie)
event.toElement 返回滑鼠移入的源節點(ie)
event.srcElement 返回激活事件的源節點(ie)
event.target 返回激活事件的源節點(firefox)
當前對象為node
返回父節點：node.parentNode, node.parendElement,
返回所有子節點：node.childNodes（包含文本節點及標簽節點）,node.children
返回第一個子節點：node.firstChild
返回最後一個子節點： node.lastChild
返回同屬上一個子節點：node.nextSibling
返回同屬下一個子節點：node.previousSibling
parentNode和parentElement功能一樣，childNodes和children功能一樣。但是parentNode和
childNodes是符合W3C標準的，可以說比較通用。而另外兩個只是IE支持，不是標准，Firefox就不支持
,所以大家只要記得有parentElement和children就行了
2、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
3、事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
（1）冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然後到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。
（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。
DOM事件模型最獨特的性質是，文本節點也觸發事件(在IE中不會)。
4、XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
XMLHttpRequest 對象提供了在網頁載入後與伺服器進行通信的方法。
<script type="text/javascript">
varxmlhttp;
functionloadXMLDoc(url){
xmlhttp=null;
if(window.XMLHttpRequest){ //code for all new browsers
xmlhttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){ //code for IE5 and IE6
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}else{
alert("Your browser does not support XMLHTTP.");
}
}
functionstate_Change(){
if(xmlhttp.readyState==4){ //4 = "loaded"
if(xmlhttp.status==200){ //200 = OK
//...our code here...
}else{
alert("Problem retrieving XML data");
}
}
}
</script>
5、嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
在標准模式中，瀏覽器根據規范呈現頁面；
在混雜模式中，頁面以一種比較寬松的向後兼容的方式顯示。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那麼它一般以標准模式
呈現。對於HTML
4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標准模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標准模式呈現，但是有過
渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
6、盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
一個元素盒模型的層次從內到外分別為：內邊距、邊框和外邊距
IE8以下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框
7、塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
塊級元素，用CSS中的display:inline;屬性則變為行內元素
行內元素，用CSS中的display:block;屬性則變為塊級元素
影響：周圍元素顯示在同一行或換行顯示，根據具體情況調整樣式
8、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
需要浮動的元素可使用CSS中float屬性來定義元素的浮動位置，left：往左浮動，right：往右浮動
浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加clearfix樣式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
9、HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
主要區別：
XHTML 元素必須被正確地嵌套
XHTML 元素必須被關閉，空標簽也必須被關閉，如 <br> 必須寫成 <br />
XHTML 標簽名必須用小寫字母
XHTML 文檔必須擁有根元素
XHTML 文檔要求給所有屬性賦一個值
XHTML 要求所有的屬性必須用引號""括起來
XHTML 文檔需要把所有 < 、>、& 等特殊符號用編碼表示
XHTML 文檔不要在注釋內容中使「--」
XHTML 圖片必須有說明文字
XHTML 文檔中用id屬性代替name屬性
10、JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。
JSON建構於兩種結構：
「名稱/值」對的集合（A collection of name/value
pairs）。不同的語言中，它被理解為對象（object），紀錄（record），結構（struct），字典（dictionary），哈希表
（hash table），有鍵列表（keyed list），或者關聯數組 （associative array）。
值的有序列表（An ordered list of values）。在大部分語言中，它被理解為數組（array）。
㈢ web前端開發要學些什麼東西，以及學習順序，求大佬解答，謝謝了。
前端行業的薪資居高不下，對於想入門的小白卻不知道如何學起，今天愛前端考拉老師告訴你小白如何開啟前端學習以及需要掌握哪些知識點。
學習對象：0基礎，對互聯網充滿熱情，想要從事H5前端開發、全棧開發的學員；
第一階段 互聯網基本原理和HTML
互聯網基本原理、伺服器、瀏覽器、HTTP請求的概念。編程工具介紹、HTML簡介。HTML語義化標簽、p標簽和h系列標簽。HTML基本骨架深入、HTML骨架、HTML和XHTML的區別。元信息標記meta、設置頁面關鍵字、字元集、關鍵字、頁面描述。a標簽和img標簽，相對路徑、絕對路徑。ul、ol、dl標簽、div和span標簽、較不常用HTML標簽簡介。表單、提交表單action、傳送方法method、插入表單對象。HTML注釋、HTML字元實體。
第二階段CSS基礎和高級技巧
選擇器。文字屬性、顏色屬性。繼承性和層疊性，權重計算。CSS盒模型，width、height、padding、border、margin屬性。父子嵌套模型，使用Fireworks精確還原設計圖。float浮動屬性、浮動的意義、清除浮動的方法。瀏覽器兼容，CSS hack。 background系列屬性、css精靈、網頁上透明。超級鏈接的偽類、導航條。 position定位、定位小技巧。DIV+CSS布局。
第三階段 靜態網站製作項目
通過以上兩個階段的學習可以達到製作網頁的水平，學習要求。需要掌握搜索引擎優化的概念、頁面常用SEO技巧、學會有格調的製作頁面。iconfont字體圖標。一些常見的CSS高級技巧，比如負margin、壓線技術、滑動門、列自撐技術。較復雜布局網站的學習，學習製作2~3個頁面。通欄banner、大背景等時下流行的網站製作方法。精美企業站賞析、製作
第四階段JavaScript基礎
語句、執行順序、詞法結構、標識符、關鍵字、變數、常量、alert語句和console控制台。值和變數、數字、文本、布爾值、null和undefined。表達式和運算符、運算符概述。流程式控制制、賦值語句、條件判斷語句、if語句、if語句的嵌套、switch語句、循環控制語句、while語句、do…while語句、for循環。跳轉語句：continue語句、break語句。函數、參數、返回值、遞歸、作用域、全局變數、局部變數。內部對象、數組、字元串。
第五階段JavaScript DOM編程
事件與事件處理概述、事件與事件名稱、常用事件、事件處理程序的調用、DOM事件模型、事件流、 事件對象、注冊與移除事件。文檔對象的常用屬性、方法與事件、輸出數據。事件的三要素。DOM對象、DOM概述、DOM分層、DOM級別、DOM對象節點屬性、遍歷文檔樹、克隆刪除替換。動畫基礎知識、定時器、setInterval和setTimeout、運動效果、 實用的動畫、製作運動效果案例
第六階段jQuery頁面特效
jQuery對象和DOM對象、jQ選擇器、CSS操作、設置和獲取HTML、文本和值。事件、載入DOM、事件綁定、合成事件、事件對象的屬性。動畫、自定義動畫方法、動畫回調函數、停止動畫、其他動畫方法。jQuery對表單、表格的操作及更多應用、表單應用、表格應用。jQuery插件，jQueryUI，jQuery ease，jQuery mousewheel等。超多頁面特效！結合案例掌握了解jQuery插件的使用。
第七階段JavaScript進階
命名空間、對象擴展、數組化、主流框架引入的機制——domReady、無沖突處理。語言模塊、字元串的擴展與修復、數組的擴展與修復、數值的擴展與修復、函數的擴展與修復、 日期的擴展與修復、瀏覽器嗅探與特徵偵測 、判定瀏覽器、事件的支持偵測、樣式的支持偵測。類工廠、JavaScript對類的支撐、各種類工廠的實現。瀏覽器內置的尋找元素的方法、屬性模塊、如何區分固有屬性與自定義屬性。
第八階段HTML5和CSS3
HTML5概述、HTML5新特性、HTML5組織、HTML5構成、HTML5頁面的特徵、HTML基礎、HTML5全局屬性、HTML5其他功能、HTML5元素分類。實戰HTML5表單、新增的input輸入類型。HTML5音頻與視頻、HTML5多媒體技術概述、在HTML5中播放音頻。CSS3編碼規范、了解CSS3新增特性。CSS選擇器、屬性選擇器、結構偽類選擇器、UI偽類選擇器。旋轉動畫、縮放動畫、移動動畫、傾斜動畫。3D炫酷動畫效果實戰。
第九階段移動web和響應式網頁
視口、縮放 、解析度、物理解析度、設備像素比、dppx和dpi 、meta視口。百分比布局、流式布局、CSS3新的流式盒模型。觸摸和指針事件、觸摸事件、手勢事件 、其他事件、拖放、滾動層、事件和交互模式、移動端交互綜合實戰。zepto.js、jQuery Mobile等移動端常見框架。HTML5速成移動端框架。Bootstrap3 、調整響應式導航條斷點。移動優先、Bootstrap柵格系統、柵格系統原理、Bootstrap中的JavaScript交互、Bootstrap敏捷開發。
第十階段伺服器知識和PHP入門
後台語言和前台語言的區別。初識PHP、PHP語言的優勢、PHP 5的新特性、PHP的發展趨勢、PHP的應用領域。 PHP環境搭建和開發工具。PHP語言基礎、PHP變數、PHP運算符、 PHP的表達式、PHP編碼規范、流程式控制制語句、字元串操作、PHP數組、 PHP與Web頁面交互。資料庫技術概述、增刪改查。
第十一階段Ajax企業項目實戰開發
Ajax概述與Ajax初體驗、Ajax技術介紹、XMLHttpRequest對象詳解、動態載入和顯示數據、XMLHttpRequest對象概述、方法、屬性、發送請求、GET和POST請求、運行周期、使用JSON響應、Ajax實用包的封裝。JSON的解析、Underscore模板引擎、模板技術、動態組裝頁面、電話號碼歸屬地查詢、驗證碼等。Ajax實戰篇 、Ajax高級表單驗證程序 、Ajax動態聯動菜單、瀑布流。
第十二階段JavaScript面向對象
創建對象、屬性的查詢和設置、 刪除屬性、檢測屬性、枚舉屬性、屬性getter和setter、屬性的特性、對象的三個屬性、序列化對象、對象方法。類和模塊、類和原型、類和構造函數、類的擴充、類和類型、子類。原型、實例化和原型、 對象實例化、通過構造器判斷對象、繼承與原型鏈、構造函數和原型對象 、構造函數、原型對象 、[[Prototype]]屬性 、在構造函數中使用原型對象 、改變原型對象、內建對象的原型對象。
第十三階段canvas動畫和手機游戲
Canvas繪圖、基本知識、理解canvas坐標系、獲取canvas環境上下文、理解路徑、路徑操作API 、繪制線條 、繪制矩形 、繪制圓弧 、繪制貝塞爾曲線 、線條屬性 、線條顏色 、填充 、繪圖狀態。圖像API、使用canvas繪制圖像、坐標變換、繪制文字。游戲原理、製作2D游戲引擎、理解游戲循環、渲染引擎實現、使用引擎構建游戲實例、游戲常用演算法。
第十四階段Node.js企業項目開發
Node的特點、非同步I/O、事件與回調函數、單線程、跨平台、Node的應用場景、I/O密集型、CommonJS規范、Node的模塊實現、路徑分析和文件定位、模塊編譯、核心模塊、JavaScript核心模塊的編譯過程、網路編程、構建TCP服務。構建HTTP服務、構建WebSocket服務、網路服務與安全。MongoDB、Express、Mongoose、socket.io。小型微博系統、俄羅斯方塊對戰。Linux使用。
第十五階段信小程序
小程序概述、 小程序開發賬戶的注冊、獲得AppId下載使用開發者工具、認識默認的文件夾結構、appjson配置、雙大括弧差值和MVVM模式、小程序操作數字、小程序API起步、案例調色板、案例微博發布框、for循環指令、if判斷指令和復選按鈕組、阿里雲伺服器開通、請求服務數字和發出改變數字、get請求信息流案例、post請求和圖片上傳、資料庫mogodb、班級說說
第十六階段ECMAScript2016
簡介、let和const命令、變數的解構賦值、字元串的擴展、正則的擴展、數值的擴展、數組的擴展、函數的擴展、對象的擴展、Symbol、Set和Map數據結構、Proxy、Reflect、Iterator和for...of循環、Generator函數、Promise對象、非同步操作和Async函數、Class、Decorator、Mole、編程風格、讀懂規格、二進制數組、SIMD
第十七階段Yeoman腳手架
基本安裝、配置、HTML模板、圖片壓縮、構建工具、包管理器、JSLint測試。
第十八階段Grunt和Gulp構建工具
GIT、SVN、Grunt、Gulp、Webpack。通過代碼優於配置的策略，Gulp 讓簡單的任務簡單，復雜的任務可管理。利用 Node.js 流的威力，你可以快速構建項目並減少頻繁的 IO 操作。通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。
第十九階段Sass、Less和Stylus
sass中可以定義變數，方便統一修改和維護。用sass進行 選擇器的嵌套，表示層級關系。用sass中導入其他sass文件，最後編譯為一個css文件t。用sass中可用mixin定義一些代碼片段，且可傳參數，方便日後根據需求調用
第二十階段React.js構建視圖組件
React簡介、JSX、組件的生命周期、實例化、數據流、事件處理、組件的復合、mixin、DOM操作、動畫、性能優化、服務端渲染、周邊類庫。VUE數據模板、生命周期、過濾器。
第二十一階段VUE界面的前端庫
遇見Vue.js、數據綁定、指令、計算屬性、表單控制項綁定、過濾器、Class與Style綁定、過渡、綁定事件、組件、表單校驗、分組校驗、與服務端通信、RESTful調用。
第二十二階段React Native移動框架
React Native簡介、React Native開發基礎、常用組件介紹及實踐、TextInput組件、九宮格實現、NavigatorIOS組件、Touchable類組件、狀態機思維與狀態機變數、深入理解UI重新渲染的過程、Navigator組件工作機制、混合開發基礎、組件生命周期、數據存儲及React Native應用實現步驟。
第二十三階段 Cordova和PhoneGap
使用加速計和位置感測器、文件系統、存儲及本地資料庫、處理音頻、圖像和視頻、處理通訊錄、本地事件、使用XUI、使用jQuery Mobile進行用戶界面開發、PhoneGap插件擴展、開發工具及測試。
第二十四階段ionic framework
Ionic和Hybrid應用介紹、配置開發環境 、Ionic導航和核心組件、選項卡、高級列表和表單組件、開發高級應用、使用 Ionic 命令行代理、在頁面中使用 ionScroll、過濾器：轉換視圖中的數據。
第二十六階版本管理系統和項目打包測試
第二十七階段前端攻防、部署和SEO
第二十八階段WebGL和Three.js
第二十九階段TypeScript和Angula4
㈣ 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等
㈤ 前端開發threejs庫難嗎
有些難度，threejs庫對於前端工程師來說要求較高。ThingJS是更為上層的抽象，不用關心渲染，mesh，光線等復雜概念。它抽象是一個個具體的模型，ThingJS封裝了對模型交互事件的各種api，比如單擊，左鍵，滑鼠滑過等，ThingJS封裝了對模型的操作，例如移動，放大縮小，上色，勾邊，甚至開門，ThingJS還封裝了模型的層次關系，例如物體是放在某個房間里的，房間又在某個樓層，樓層又是某個大樓的，大樓在園區里。這樣講是不是更直觀呢？所以既然有難度不如使用封裝threejs庫的thingjs吧網頁鏈接
㈥ web前端開發要怎麼學
要學前端就要想了解前端是什麼，用官方的定義，就是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。
用我們的話來說，前端就是網頁給訪問網站的人看的內容和頁面，而前端開發顧名思義就是這些內容的製作，也就是代碼的實現。而要實現這些代碼，就要用到HTML，CSS及JavaScript三大基礎知識。目前看來。論趨勢如何發展，它們都是整個前端開發的三大基石。
前端學習起來知識面比較廣，知識很雜亂，可能自學起來有一定的困難，缺乏學習方向。如果要報班培訓的話，也是一個不錯的選擇，至少，你能明確自己的學習方向，遇到問題可以及時解決，不過可能要承擔昂貴的學費。
總之，無論是自學還是報班，前端的學習都是一個大工程，都需要自己多下功夫的。學無止境，付出全身心的努力，你一定能得到收獲。
㈦ web前端需要學什麼容易學嗎
這里整理了一份web前端學習路線圖以及所學內容：
web前端路線圖：
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、生命周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
㈧ 學習前端有什麼書推薦
一、《web前端開發最佳實踐》
這本書是前端開發領域的經典之作，是一本扎實前端基本功，規范我們前端代碼的實踐性書籍。本書主要講解了HTML、CSS、JavaScript以及移動端開發的最佳實踐方案，能對缺乏良好知道的開發者產生很大的幫助。通過閱讀本書我們可以掌握如何編寫高可讀性、高維護性、高性能的HTML、CSS以及JavaScript。
二、《CSS那些事兒》
《CSS那些事兒是2009年電子工業出版社出版的圖書，作者是林小志。該書通過對CSS技巧實例進行講解，深入地分析了CSS相關知識。
通過頁面中的文字、圖片、表格、表單等常見元素的處理及各種頁面布局方式的使用，使讀者能深入了解如何在頁面中更好地運用CSS布局。尤其是在頁面布局的部分中，全面分析了多重布局方式，著重分解了兩列等高和三列等高的幾種方式，並相應說明了等高布局的優缺點。
三、《CSS權威指南》
內容介紹：《CSS權威指南》通過諸多示例，詳細講解了如何做到僅在一處建立樣式表就能創建或修改整個網站的外觀，以及如何得到html力不能及的更豐富的表現效果。同時展示了如何遵循css最新規范（css2和css2.1）將層疊樣式表的方方面面應用於實踐。
七、HTTP權威指南
內容介紹：《HTTP權威指南》由古爾利所著，《HTTP權威指南》詳細解釋了如何用HTTP來開發基於Web的應用程序，核心的[網際網路協議，如何與架構構建塊交互，如何正確實現網際網路客戶和伺服器等。
《HTTP權威指南》的中心內容是HTTP，本質是理解Web的工作原理，以及如何將這些知識應用到Web編程和管理之中，主要涵蓋HTTP的技術運作方式、產生動機、性能和目標以及一些相關技術問題。 《HTTP權威指南》適合所有想了解HTTP和Web底層結構的人閱讀。
八、高性能網站建設指南
內容介紹：《高性能網站建設指南》結合Web2.0以來Web開發領域的最新形勢和特點，介紹了網站性能問題的現狀、產生的原因，以及改善或解決性能問題的原則、技術技巧和最佳實踐。重點關注網頁的行為特徵，闡釋優化Ajax、CSS、JavaScript、Flash和圖片處理等要素的技術，全面涵蓋瀏覽器端性能問題的方方面面。
㈨ 你遇到的前端面試題都有什麼
大家好，我是王我。
隨著春節的結束，各個行業也普遍開始了上班的節奏， 不過本人17號才上班。為什麼？因為長得帥的都上班比較晚。 當然，每到新年結束，又迎來了一批招聘者與面試者，我來說說作為一年工作經驗應該知道的面試題。
HTML篇
1.doctype是什麼？有哪些類型？
2.input有哪些新類型？簡要說明其8用法。
3.HTML5有哪些新特性，移除了哪些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？
4.bootstrap響應式的原理是什麼？
5.多移動終端頁面適配是如何實現的？
CSS篇
1.如何實現兩列布局，左邊自適應，右邊固定寬度？
2.用CSS畫一個三角形
3.CSS實現字體大寫
4.display有哪些常用的屬性值？分別是什麼意思？
5.position為absolute，relative，fixed的定點位置
6.用三種方法清除浮動
7.請介紹一下margin塌陷問題
js篇
1.什麼是事件冒泡和捕獲？如何阻止事件冒泡？(分別用原生和jquery實現)
2.js創建對象，至少使用三種方法
3.簡述一下事件穿透以及解決辦法
4.用三種方式判斷變數類型是否是數組
5.如何實現對象的拷貝？
6.什麼是閉包？閉包的優缺點。
7.簡述一下ajax請求的過程。
8.簡述一下new一個人構造函數的人過程。
9.為什麼會有跨域？是怎麼解決跨域問題的？簡述一下原理。
10.js原始數據類型有哪些？
11.學一個函數，判斷一個變數是否是字元串
12.typeof有哪些結果？
13.剪頭函數和普通函數有什麼區別？
14.請用三種方法實現數組去重
15.href和src有什麼區別？
jquery篇
1.attr()和prop()有什麼區別？
2.on和bind有什麼區別？js動態添加的dom元素是通過on還是bind？
3.touch和click有什麼區別？
4.window.onload和jquery的ready有什麼區別？
vue篇
1.簡述一下vue的生命周期及其特點
2.vue雙向綁定的原理是什麼？
3.vue的特點有哪些？和jquery有什麼區別？
4.父子組件之間傳遞數據的方法
5.子組件如何共享數據？
6.一般有什麼工具進行數據交互？
7.webpack的原理是什麼？
8.簡述一下$nextTick的用法
瀏覽器篇
1.cookie、sessionStorage、localStorage的區別是什麼？
2.有用過瀏覽器緩存嗎？簡述一下基本的緩存機制
網路篇
1.http和https之間的區別
2.從伺服器的安全考慮，是使用get請求還是post請求？
3.URL請求的過程有哪些？
項目經驗篇
1.項目中遇到的最大挑戰以及解決辦法
2.常見的網頁優化有哪些？
作為一個面試一年以內工作經驗的前端程序員來說，以上的問題能夠倒答如流月薪6k應該不成問題啦。這些面試題也是我在很多面試中感覺經常被問到的題目。
希望大家年後找工作能夠順順利利， 千萬不要跟我一樣哦，只有帥氣就一無所有了。
大家好，我是王我，中國最帥的前端程序員。
前幾次都是各種培訓公司，各種忽悠就不提了，說說後面4次面試的經歷。
第一次是面一個小公司，不過他們好像沒有厲害的前端，來面我的是個後端，一來沒有問我關於js的知識，直接問我以前做過什麼，有沒有經驗，我本人不會吹牛，簡歷也沒怎麼包裝，就是自己把自學的知識和做的幾個小demo弄在上面，也用github掛在頁面上了，不過他根本不點開看，也不問，問我會不會vue，我當時對框架還不了解，他就說他們需要能直接上手開始寫的，所以我第一個就直接掛了。
第二次面試是一個國企，這個問了很多問題，都很基礎，js數據類型，數組操作，事件，大概就是高程的前面幾章看看就差不多都能答到，然後因為他們主要用jq，所以問了很多jq的操作，關於節點的，動畫的，我看鋒利的jq大概看了3遍，也練過多次，所以我答的很熟。然後問了些布局方面的，bootstrap我了解過，又看過css3，所以這方面也沒啥問題，最後在現場做了個題目，主要就是布局然後通過ajax呈現數據。後面聽介紹我面試的說面試官比較滿意，說我jq很熟，一面就過了。可惜後面電話面試不知怎麼回事可能表現的不夠自信，雖然沒問技術，但是我沒啥自信，把沒項目經驗什麼的也不知怎麼就一五一十交代了，估計因為這個掛掉了。
第三次沒問問題，直接就是一套題開做，我在那做了一個多小時。題目就是按照要求一步一步做一個頁面出來，我也搞忘了我當時卡在哪個地方了，坐在那得時候就是做不出來，沒有設計圖，要根據他的描述自己找個設計圖然後做，我第一次遇到這個有點懵，雖然當時沒做出來，不過回來我自己花了幾個小時把它做了。所以這個也是涼了。
第四個問的比較多，數據類型，數組操作，跨域，ajax，閉包，原型鏈，繼承，深拷貝，淺拷貝，模塊amd cmd，基本都是問的js。然後問了html5的新特性 css3 的新特性，遇到過什麼瀏覽器的兼容性問題，怎麼解決的，以後想往什麼方面發展。這個時候我已經會點vue了，照著做了個小demo，不過後來知道公司用的angularjs，面試官也沒看我做的，問也沒問。。以前聽網上說要帶上自己的項目去面試感覺沒起多大效果。
最後總結下如果面的比較初級的崗位，應該主要問js，原型鏈，繼承，閉包，深淺拷貝，ajax，跨域，然後js的基礎知識，對了還有apply和call也問了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一點的，暫時還沒面過，等以後面過在來回答
1. cookie session 的用途和區別，以及有效期
1、cookie數據存放在客戶的瀏覽器上，session數據放在伺服器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在伺服器上。當訪問增多，會比較佔用你伺服器的性能
考慮到減輕伺服器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
2. vue的數據綁定原理，mvvm與mvc的區別
MVVM：
m:model數據模型層 v:view視圖層 vm:ViewModel
vue中採用的是mvvm模式，這是從mvc衍生過來的
MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題
圖片說明一下：
說到MVVM就要說一下雙向綁定和數據劫持的原理，
MVC：
m:model數據模型層 v:view視圖層 c:controller控制器
原理： c層需要控制model層的數據在view層進行顯示
MVC兩種方式，圖片說明：
總結：
mvvm與mvc最大的區別：
MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性後該屬性對應的view層會自動改變。
不懂得可以復制鏈接查看：
https://www.pianshen.com/article/3716256399/
3. storage 的區別 sessionStorage localStorage
localStorage 的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性
sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的
有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性
傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然後獲取其value屬性
但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值
所以在後面的按鈕中獲取name值 直接獲取vue實例對象data裡面的myname屬性即可
【數據為尊 ----數據映射到瀏覽器 如果數據v-model後修改（肯定input）然後到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】
緩存路由組件
使用的是vue的一個組件，參考vue的官方文檔
使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀
-----【保障組件的數據不會被切換路由而銷毀數據】
Home是對應的組件對象的名字，不是路由的名字
6.多維數組拍平
數組拍平也稱數組扁平化，就是將數組裡面的數組打開，最後合並為一個數組
一紅六種方法吧……
了解的請看： https://www.cnblogs.com/guan-shan/p/10165737.html
7.跨域的原因 解決方案
跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。
這樣就可以說同源策略----協議---埠---域名
原生的src和href可以解決跨域
代理可以解決
請求頭也可以攜帶瀏覽器提示的也可以解決
一般都是後端解決跨域問題
【別的需要了解看下方鏈接】
https://blog.csdn.net/qq_41604383/article/details/100770100
8.uniApp兼容問題§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什麼ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎麼升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。
§ 如果你使用離線打包，請注意HBuilderX升級後，真機運行基座和雲打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯後HBuilderX正式版升級一兩天。
§ 如果你使用自定義基座，之前製作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX後你應該重新製作新版自定義基座。
§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。
§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式後，同時保留了對老編譯模式的向下兼容。
在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。
在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。
§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。
§ 雲打包的引擎版本說明
HBuilderX Alpha，只有1套雲打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。
HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。
中間的緊急更新版本沒有獨立打包機。
舉個例子：
HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。
那麼當前可用的打包機有1.9.1和1.8.2這2台。（即每個大版本的最後一個版本）
除了這2個HBuilderX版本外，其他版本的雲打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的雲打包機）
【詳情請看】
https://ask.dcloud.net.cn/article/35845
一、HTML
HTML書寫規范
H5新增標簽
HTML渲染過程
二、CSS
css盒子模型概念
css彈性布局概念
三、JavaScript
事件模型
DOM2級事件模型
閉包
原型鏈
四、移動Web開發
常見的布局方案
移動端前端常見的觸摸相關事件touch、tap、swipe等整理
移動端前端手勢事件
移動端頁面渲染優化
GPU渲染
GPU核心渲染過程
五、調試
常用的調試工具
Chrome控制台調試js使用
移動端測試
六、HTTP網路知識
常見的HTTP狀態碼
不同請求類型的區別
WEB緩存方案
——————————
牛客網（www.nowcoder.com）
- 專業IT筆試面試備考平台
- 最全C++JAVA前端等互聯網技術求職題庫
- 全面提升IT編程能力
- 程序員交友聖地
分享了一些Web前端的面試題，限時一小時，你看看自己能夠答出多少道！
放心，這些面試題都是一些非常基礎的知識，只要你在平時認真聽課、學習了，那麼這些面試題肯定不會難道你。
建議：雖然沒有人監督你，但還是希望你不要去尋找答案，脫離網路，拿起紙筆，你試一下自己究竟能夠答出個什麼水平！有沒有真本領？答案盡在這些面試題里！那麼，你准備好了嗎？OK！計時開始！
一、HTML常見題目01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義？
02、HTML5為什麼只需要寫？
03、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
04、頁面導入樣式時，使用link和@import有什麼區別？
05、介紹一下你對瀏覽器內核的理解？
06、常見的瀏覽器內核有哪些？
07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
08、如何區分HTML和HTML5？
09、簡述一下你對HTML語義化的理解？
10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
二、CSS類的題目01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？
02、CSS選擇符有哪些？哪些屬性可以繼承？
03、CSS優先順序演算法如何計算？
04、CSS3新增偽類有那些？
05、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
06、display有哪些值？說明他們的作用。
07、position的值relative和absolute定位原點是？
08、CSS3有哪些新特性？
09、請解釋一下CSS3的Flexbox(彈性盒布局模型),以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？
三、Java類的題目
01、介紹Java的基本數據類型。
02、說說寫Java的基本規范？
03、Java原型，原型鏈？有什麼特點？
04、Java有幾種類型的值？(堆：原始數據類型和棧：引用數據類型)，你能畫一下他們的內存圖嗎？
05、Java如何實現繼承？
06、Java創建對象的幾種方式？
07、Java作用鏈域？
08、談談This對象的理解。
09、eval是做什麼的？
10、什麼是window對象？什麼是document對象？
OK，一小時到了，這個時間可不算短了，那麼這些面試題你答出了幾道呢？你寫的答案正確了嗎？現在你可以去翻看答案了。
如果你答出了絕大多數的或者是全部的題，並且答案也正確了，那麼恭喜你……
你這時心裡是不是有點小竊喜，認為自己有能力拿高薪了？雖然我也很想這么告訴你，但事實上這只能表明你的基礎扎實，畢竟這只是一些非常基礎的面試題。騷年~繼續努力吧！
如果你只答出了小部分或者答出了大部分題但答案不正確，那麼我只想說：「騷年，你的水平還差的遠呢。」連這么基礎的題你都打不出來，還想拿高薪？回去再練一段時間吧！
扎實的基礎是你拿高薪的重要武器，如果你連基礎都不扎實，那麼想要攻克「高薪」這個厚實的堡壘，那隻是痴人說夢罷了。
1.前端框架類問題，問你會不會用vue react啊
2.語言類，問你一些JavaScript語言的問題
3.項目經驗，讓你講講做過的項目，遇到的問題和解決之道
㈩ DOM事件機制
前言
一、DOM事件級別
DOM級別一共可以分為四個級別：DOM0級、DOM1級、DOM2級和DOM3級。而DOM事件分為3個級別：DOM 0級事件處理，DOM 2級事件處理和DOM 3級事件處理。由於DOM 1級中沒有事件的相關內容，所以沒有DOM 1級事件。
1.DOM 0級事件
el.onclick=function(){}
當希望為同一個元素/標簽綁定多個同類型事件的時候（如給上面的這個btn元素綁定3個點擊事件），是不被允許的。DOM0事件綁定，給元素的事件行為綁定方法，這些方法都是在當前元素事件行為的冒泡階段(或者目標階段)執行的。
2.DOM 2級事件
el.addEventListener(event-name, callback, useCapture)
event-name: 事件名稱，可以是標準的DOM事件
callback: 回調函數，當事件觸發時，函數會被注入一個參數為當前的事件對象 event
useCapture: 默認是false，代表事件句柄在冒泡階段執行
IE9以下的IE瀏覽器不支持 addEventListener()和removeEventListener()，使用 attachEvent()與detachEvent() 代替，因為IE9以下是不支持事件捕獲的，所以也沒有第三個參數，第一個事件名稱前要加on。
3.DOM 3級事件
在DOM 2級事件的基礎上添加了更多的事件類型。
UI事件，當用戶與頁面上的元素交互時觸發，如：load、scroll
焦點事件，當元素獲得或失去焦點時觸發，如：blur、focus
滑鼠事件，當用戶通過滑鼠在頁面執行操作時觸發如：dblclick、mouseup
滾輪事件，當使用滑鼠滾輪或類似設備時觸發，如：mousewheel
文本事件，當在文檔中輸入文本時觸發，如：textInput
鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發，如：keydown、keypress
合成事件，當為IME（輸入法編輯器）輸入字元時觸發，如：compositionstart
變動事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified
同時DOM3級事件也允許使用者自定義一些事件。
二、DOM事件模型和事件流
DOM事件模型分為捕獲和冒泡。一個事件發生後，會在子元素和父元素之間傳播（propagation）。這種傳播分成三個階段。
（1）捕獲階段：事件從window對象自上而下向目標節點傳播的階段；
（2）目標階段：真正的目標節點正在處理事件的階段；
（3）冒泡階段：事件從目標節點自下而上向window對象傳播的階段。
DOM事件捕獲的具體流程
捕獲是從上到下，事件先從window對象，然後再到document（對象），然後是html標簽（通過document.documentElement獲取html標簽），然後是body標簽（通過document.body獲取body標簽），然後按照普通的html結構一層一層往下傳，最後到達目標元素。
而事件冒泡的流程剛好是事件捕獲的逆過程。
接下來我們看個事件冒泡的例子：
正如我們上面提到的onclick給元素的事件行為綁定方法都是在當前元素事件行為的冒泡階段(或者目標階段)執行的。
三、事件代理(事件委託)
由於事件會在冒泡階段向上傳播到父節點，因此可以把子節點的監聽函數定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。
1.優點
減少內存消耗，提高性能
假設有一個列表，列表之中有大量的列表項，我們需要在點擊每個列表項的時候響應一個事件
如果給每個列表項一一都綁定一個函數，那對於內存消耗是非常大的，效率上需要消耗很多性能。藉助事件代理，我們只需要給父容器ul綁定方法即可，這樣不管點擊的是哪一個後代元素，都會根據冒泡傳播的傳遞機制，把容器的click行為觸發，然後把對應的方法執行，根據事件源，我們可以知道點擊的是誰，從而完成不同的事。
動態綁定事件
在很多時候，我們需要通過用戶操作動態的增刪列表項元素，如果一開始給每個子元素綁定事件，那麼在列表發生變化時，就需要重新給新增的元素綁定事件，給即將刪去的元素解綁事件，如果用事件代理就會省去很多這樣麻煩。
2.如何實現
接下來我們來實現上例中父層元素 #list 下的 li 元素的事件委託到它的父層元素上：
四、Event對象常見的應用
event. preventDefault()
如果調用這個方法，默認事件行為將不再觸發。什麼是默認事件呢？例如表單一點擊提交按鈕(submit)跳轉頁面、a標簽默認頁面跳轉或是錨點定位等。
很多時候我們使用a標簽僅僅是想當做一個普通的按鈕，點擊實現一個功能，不想頁面跳轉，也不想錨點定位。
也可以通過JS方法來阻止，給其click事件綁定方法，當我們點擊A標簽的時候，先觸發click事件，其次才會執行自己的默認行為
接下來我們看個例子：輸入框最多隻能輸入六個字元，如何實現？
event.stopPropagation() & event.stopImmediatePropagation()
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件處理程序被執行。上面提到事件冒泡階段是指事件從目標節點自下而上向window對象傳播的階段。
我們在例4的inner元素click事件上，添加event.stopPropagation()這句話後，就阻止了父事件的執行，最後只列印了'inner'。
stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件類型的其它監聽器被觸發。而 stopPropagation 只能實現前者的效果。我們來看個例子：
如上所示，使用 stopImmediatePropagation後，點擊按鈕時，不僅body綁定事件不會觸發，與此同時按鈕的另一個點擊事件也不觸發。
event.target & event.currentTarget
老實說這兩者的區別，並不好用文字描述，我們先來看個例子：
當我們點擊最里層的元素d的時候，會依次輸出:
從輸出中我們可以看到，event.target指向引起觸發事件的元素，而event.currentTarget則是事件綁定的元素，只有被點擊的那個目標元素的event.target才會等於event.currentTarget。也就是說，event.currentTarget始終是監聽事件者，而event.target是事件的真正發出者。
五、參考文章
DOM級別與DOM事件
DOM事件機制解惑
事件模型
JavaScript 事件委託詳解
JavaScript 事件的學與記：stopPropagation 和 stopImmediatePropagation
event.target和event.currentTarget的區別
原文： https://github.com/ljianshu/Blog/issues/44
最後：「相信有很多想學前端的小夥伴，今年年初我花了一個月整理了一份最適合2018年學習的web前端干貨，從最基礎的HTML+CSS+JS到移動端HTML5等都有整理，送給每一位前端小夥伴，53763，1707這里是小白聚集地，歡迎初學和進階中的小夥伴。」
祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。