一. 寫出下面程式的運作結果
for
結果：1秒後一下子列印出5個5。當循環完成時才會輪到setTimeout異步執行其回調函數function，此時i已經變成5，故5個console.log(i)裡的i全使用的是5。
易錯點：千萬别寫成“列印5個4”啊！暴風哭泣>_<
二. 請列舉至少8種jQuery中的DOM節點操作，并說明用途。
1.查找節點
使用jQuery在文檔樹上查找節點非常容易。可以通過jQuery選擇器(見第3題)來完成。
用jQuery選擇器能夠快捷而輕松地查找到文檔中的某個特定的元素節點，然後可以用attr()方法來擷取元素的各種屬性的值。
1.1查找元素節點
var
1.2查找屬性節點
var
2.建立節點
$(html)方法會根據傳入的HTML标記字元串，建立一個 DOM對象，并将這個DOM對象包裝成一個jQuery對象後傳回。要想将新建立的元素插入文檔，可以使用jQuery中的append()等方法。
2.1建立元素節點
var
2.2建立文本節點
建立文本節點就是在建立元素節點時直接把文本内容寫出來，然後使用append()等方法将它們添加到文檔中就可以了。
var
2.3建立屬性節點
建立屬性節點與建立文本節點類似，也是直接在建立元素節點時一起建立。
var
3.插入節點
動态建立HTML元素并沒有實際用處，還需要将新建立的元素插入文檔中。将新建立的節點插入文檔最簡單地辦法是，讓它成為這個文檔的某個節點的子節點。
3.1 append() 向每個比對的元素内部追加内容
$("p").append("<b>你好</b>") // 結果是<p>我說：<b>你好</b></p>
3.2 appendTo() 将所有比對的元素追加到指定的元素中
$("<b>你好</b>").appendTo("p") // 結果是<p>我說：<b>你好</b></p>
3.3 prepend() 向每個比對的元素内部前置内容
$("p").prepend("<b>你好</b>") // 結果是<p><b>你好</b>我說：</p>
3.4 prependTo() 将所有比對的元素前置到指定的元素中
$("<b>你好</b>").prependTo("p") // 結果是<p><b>你好</b>我說：</p>
3.5 after() 在每個比對的元素之後插入内容
$("p").after("<b>你好</b>") // 結果是<p>我說：</p><b>你好</b>
3.6 insertAfter() 将所有比對的元素插入到指定元素的後面
$("<b>你好</b>").insertAfter("p") // 結果是<p>我說：</p><b>你好</b>
3.7 before() 在每個比對的元素之前插入内容
$("p").before("<b>你好</b>") // 結果是<b>你好</b><p>我說：</p>
3.8 insertBefore() 将所有比對的元素插入到指定的元素的前面
$("<b>你好</b>").insertBefore("p") // 結果是<b>你好</b><p>我說：</p>
4.删除節點
如果文檔中某一個元素多餘那麼應将其删除。
4.1 remove()方法
作用是從DOM中删除所有比對的元素，傳入的參數用于根據jQuery表達式來篩選元素
$("ul li:eq(1)").remove() // 擷取<ul>節點中的第2個<li>元素節點後，将它從網頁中删除
$("ul li").remove("li[title!=鳳梨]")// 将<li>元素中屬性title不等于“鳳梨”的<li>元素删除
4.2 detach()方法
detach()和remove()一樣，也是從DOM中去掉所有比對的元素。但這個方法不會把比對的元素從jQuery對象中删除，因而可以在将來再使用這些比對的元素。與remove()不用的是，所有綁定的事件、附加的資料等都會保留下來。
$
4.3 empty()方法
empty()方法并不是删除節點，而是清空節點，它能清空元素中的所有後代節點。
$("ul li:eq(1)").empty() // 擷取第2個<li>元素節點後，清空此元素裡的内容，注意是元素裡。當運作代碼後，第2個<li>元素的内容被清空了，隻剩下<li>标簽預設的符号“.”
5.複制節點
clone()方法
$
複制節點後，被複制的新元素并不具有任何行為。若需要新元素也具有複制功能（上例是單擊事件），可使用如下jQuery代碼：
$
6.替換節點
6.1 replaceWith()
replaceWith()方法的作用是将所有比對的元素都替換成指定的HTML或者 DOM元素
例如：要将網頁中<p title="選擇你喜歡">你喜歡的蔬果？</p>替換成<strong>你讨厭的蔬果？</strong>
$
6.2 replaceAll()
該方法與replaceWith()作用相同，隻是颠倒了replaceWith()操作，可使用如下代碼實作上例同樣的功能：
$
注意：若在替換之前已經給元素綁定事件，替換後原先綁定的事件将會與被替換的元素一起消失，需要在新元素上重新綁定事件。
7.包裹節點
wrap()将某個節點用其他标記包裹起來，該方法對于需要在文檔中插入額外的結構化标記非常有用，而且它不會破壞原始文檔的語義。
$
得到的結果是：<b><strong title="選擇你喜歡的">你最喜歡的水果？</strong></b>
wrapAll()方法會将所有比對的元素用一個元素來包裹，它不同于wrap()方法，wrap()方法是将所有的元素進行單獨的包裹。
wrapInner()方法将每一個比對的元素的子内容（包括文本節點）用其他結構化的标記包裹起來。例如可使用它來包裹<strong>标簽的子内容，
$
8.屬性操作
jQuery中用attr()方法來擷取和設定元素屬性，removeAttr()方法來删除元素屬性。
9.樣式操作
9.1 擷取樣式和設定樣式
擷取class和設定class都可以使用attr()方法來完成。
<
上面的代碼中class也是<p>元素的屬性，是以擷取和設定class都可以使用attr()方法來完成：
var
9.2 追加樣式
addClass()方法專門用來追加樣式。
9.3 移除樣式
removeClass()方法用來删除class的某個值，作用是從比對的元素中删除全部或者指定的class。
如：$("p").removeClass("high another") // 把<p>元素的兩個class都删除
也可以寫成：$("p").removeClass() // 移除<p>元素的所有class
9.4 切換樣式
toggle()方法
$toggleBtn
toggle()方法此時主要是控制行為上的重複切換：交替執行代碼3和代碼4兩個函數，如果元素原來是顯示的，則隐藏它；如果元素原來是隐藏的，則顯示它。
toggleClass()方法：控制樣式上的重複切換。如果類名存在則删除它，如果類名不存在則添加它。
9.5 判斷是否含有某個樣式
hasClass()可以用來判斷元素中是否含有某個class，如果有則傳回true，否則傳回false。
10.設定和擷取HTML、文本和值
10.1 html()方法
此方法類似于JavaScript中的innerHTML屬性，可用來讀取或者設定某個元素中的HTML内容。
10.2 text()方法
此方法類似于JavaScript中的innerText屬性，可用來讀取或者設定某個元素中的文本内容。
10.3 val()方法
此方法類似于JavaScript中的value屬性，可用來設定和擷取元素的值。無論元素是文本框、下拉清單還是單選框，它都可以傳回元素的值。如果元素為多選，則傳回一個包含所有選擇的值的數組。
11.周遊節點
11.1 children()方法
該方法用于取得比對元素的子元素集合。
注意：children()方法隻考慮子元素而不考慮其他後代元素。
11.2 next()方法
該方法用于取得比對元素後面緊鄰的同輩元素。
11.3 prev()方法
該方法用于取得比對元素前面緊鄰的同輩元素。
11.4 siblings()方法
該方法用于取得比對元素前後所有的同輩元素。
11.5 closest()方法
該方法用于取得最近的比對元素。
首先檢查目前元素是否比對，若比對則直接傳回元素本身，若不比對則向上查找父元素，逐級向上直到找到比對選擇器的元素。如果什麼都沒找到則傳回一個空的jQuery對象。
11.6 parent()，parents()與closest()差別
parent() 擷取集合中每個比對元素的父級元素
parents() 擷取集合中每個比對元素的祖先元素
closest() 從元素本身開始逐級向上級元素比對并傳回最先比對的祖先元素。（它隻傳回比對的第一個元素節點）
11.7 find()，filter()，nextAll()和prevAll()等周遊節點的方法，都可以使用jQuery表達式來作為它們的參數來篩選元素。
12.CSS-DOM操作
CSS-DOM技術簡單來說就是讀取和設定style對象的各種屬性。
12.1 jQuery可以直接利用css()方法擷取元素的樣式屬性，也可以直接利用css()方法設定某個元素的單個樣式。
$
height()擷取比對元素目前計算的高度值(px)：
$
width()可以取得比對元素的寬度值(px)或者設定元素的寬度。
12.2 關于元素定位
12.2.1 offset()方法
作用是擷取元素在目前視窗的相對偏移，其中傳回的對象包含兩個屬性，即top和left，它隻對可見元素有效。
12.2.2 position()方法
作用是擷取元素相對于最近的一個position樣式屬性設定為relative或者absolute的祖父節點的相對偏移，與offset()一樣傳回的對象也包括兩個屬性即top和left。
12.2.3 scrollTop()方法和scrollLeft()方法
這兩個方法的作用分别是擷取元素的滾動條距頂端的距離和距左側的距離。還可以為這兩個方法指定一個參數，控制元素的滾動條滾動到指定位置。
$("textarea").scrollTop(300) // 元素的垂直滾動條滾動到指定的位置
$("textarea").scrollLeft(300) // 元素的橫向滾動條滾動到指定的位置
var $p = $("p")
var scrollTop = $p.scrollTop // 擷取元素的滾動條距頂端的距離
var scrollLeft = $p.scrollLeft // 擷取元素的滾動條距左側的距離
var position = $("p").position() // 擷取<p>元素的position()
var left = position.left // 擷取左偏移
var top = position.top // 擷取上偏移
var offset = $("p").offset() // 擷取<p>元素的offset()
var left = offset.left // 擷取左偏移
var top = offset.top // 擷取上偏移
三. 請列舉jQuery中常用的選擇器有哪幾種（至少說明3種），并每種列舉3個。
jQuery選擇器分為基本選擇器、層次選擇器、過濾選擇器和表單選擇器。
- 基本選擇器
基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class和标簽名等來查找DOM元素。
(1) #id 根據給定的id比對一個元素
如：$("#test")選取id為test的元素
(2) .class 根據給定的類名比對元素
如：$(".test")選取所有class為test的元素
(3) element 根據給定的元素名比對元素
如：$("p")選取所有的<p>元素
(4) * 比對所有元素
如：$("*")選取所有的元素
(5) selector1, selector2, ... , selectorN 将每一個選擇器比對到的元素合并後一起傳回
如：$("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>标簽的一組元素
- 層次選擇器
通過DOM元素之間的層次關系來擷取特定元素，例如後代元素、子元素、相鄰元素和同輩元素等。
(1)$("ancestor descendant") 選取ancestor元素裡所有的descendant即後代元素
如：$("div span")選取<div>裡的所有的<span>元素
(2)$("parent > child") 選取parent元素下的child即子元素，與$("ancestor descendant")有差別，$("ancestor descendant")選擇的是後代元素
如：$("div > span")選取<div>元素下的元素名是<span>的子元素
(3) $("prev + next") 選取緊接在prev元素後的next元素
如：$(".one + div")選取class為one的下一個<div>同輩元素
(4) $("prev ~ siblings") 選取prev元素之後的所有siblings元素
如：$("#two~div")選取id為two的元素後面的所有<div>同輩元素
(3)(4)有更簡單的替代方案：
可以用next()方法來代替$("prev + next")選擇器
如：$(".one").next("div")等價于$(".one + div")
可以使用nextAll()方法來代替$("prev~siblings")選擇器
如：$("#prev").nextAll("div")等價于$("#prev~div")
$("#prev~div")選擇器隻能選擇"prev"元素後面的<div>元素，而siblings()方法與前後位置無關，隻要是同輩節點就都能比對。
// 選取#prev之後的所有同輩div元素
- 過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞類選擇器文法相同，即選擇器都以一個冒号（：）開頭。按照不同的過濾規則，過濾選擇器可以分為基本過濾、内容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。
-
基本過濾選擇器
(1) :first 選取第1個元素
如：$("div:first")選取所有<div>元素中第1個<div>元素
(2) :last 選取最後1個元素
如：$("div:last")選取所有<div>元素中的最後一個<div>元素
(3) :not(selector) 去除所有與給定選擇器比對的元素
如：$("input:not(.myClass)")選取class不是myClass的<input>元素
(4) :even 選取索引是偶數的所有元素，索引從0開始
如：$("input:even")選取索引是偶數的<input>元素
(5) :odd 選取索引是奇數的所有元素，索引從0開始
如：$("input:odd")選取索引是奇數的<input>元素
(6) :eq(index) 選取索引等于index的元素(index從0開始)
如：$("input:eq(1)")選取索引等于1的<input>元素
(7) :gt(index) 選取索引大于index的元素(index從0開始)
如：$("input:gt(1)")選取索引大于1的<input>元素（注：大于1而不包括1）
(8) :lt(index) 選取索引小于index的元素(index從0開始)
如：$("input:lt(1)")選取索引小于1的<input>元素（注：小于1而不包括1）
(9) :header 選取所有的标題元素，例如h1,h2,h3等等
如：$(":header")選取網頁中的所有的<h1>,<h2>,<h3>...
(10) :animated 選取目前正在執行動畫的所有元素
如：$("div:animated")選取正在執行動畫的<div>元素
(11) :focus 選取目前擷取焦點的元素
如：$(":focus")選取目前擷取焦點的元素
-
内容過濾選擇器
内容過濾選擇器的過濾規則主要展現在它所包含的子元素或文本内容上。
(1) :contains(text) 選取含有文本内容為"text"的元素
如：$("div:contains('我')")選取含有文本“我”的<div>元素
(2) :empty 選取不包含子元素或者文本的空元素
如：$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素
(3) :has(selector) 選取含有選擇器所比對的元素的元素
如：$("div:has(p)")選取含有<p>元素的<div>元素
(4) :parent 選取含有子元素或者文本元素的元素
如：$("div:parent")選取擁有子元素（包括文本元素）的<div>元素
-
可見性過濾選擇器
(1) :hidden 選取所有不可見的元素
如：$(":hidden")選取所有不可見的元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素。如果隻想選取<input>元素，可以使用$("input:hidden")
(2) :visible 選取所有可見的元素
如：$("div:visible")選取所有可見的<div>元素
-
屬性過濾選擇器
屬性過濾選擇器的過濾規則是通過元素的屬性來擷取相應的元素。
(1) [attribute] 選取擁有此屬性的元素
如：$("div[id]")選取擁有屬性id的元素
(2) [attribute=value] 選取屬性的值為value的元素
如：$("div[title=test]")選取屬性title為"test"的<div>元素
(3) [attribute!=value] 選取屬性的值不等于value的元素
如：$("div[title!=test]")選取屬性title不為"test"的<div>元素（注意：沒有屬性title的<div>元素也會被選取）
(4) [attribute^=value] 選取屬性的值以value開始的元素
如：$("div[title^=test]")選取屬性title以"test"開始的<div>元素
(5) [attribute$=value] 選取屬性的值以value結束的元素
如：$("div[title$=test]")選取屬性title以"test"結束的<div>元素
(6) [attribute*=value] 選取屬性的值含有value的元素
如：$("div[title*=test]")選取屬性title含有"test"的<div>元素
(7) [attribute|=value] 選取屬性等于給定字元串或以該字元串為字首（該字元串後跟一個連字元“-”）的元素
如：$('div[title|="en"]')選取屬性title等于en或以en為字首（該字元串後跟一個連字元'-'）的元素
(8) [attribute~=value] 選取屬性用空格分隔的值中包含一個給定值的元素
如：$('div[title~="uk"]')選取屬性title用空格分隔的值中包含字元uk的元素
(9) [attribute1][attribute2][attributeN] 用屬性選擇器合并成一個複合屬性選擇器，滿足多個條件。每選擇一次，縮小一次範圍
如：$("div[id][title$='test']")選取擁有屬性id并且屬性title以'test'結束的<div>元素
-
子元素過濾選擇器
(1) :nth-child(index/even/odd/equation) 選取每個父元素下的第index個子元素或者奇偶元素。（index從1算起）
如：注意:eq(index)隻比對一個元素，而:nth-child将為每一個父元素比對子元素，并且:nth-child(index)是從1開始的，而:eq(index)是從0算起的。
(2) :first-child 選取每個父元素的第1個子元素
如：注意:first隻傳回單個元素，而:first-child選擇符将為每個父元素比對第1個子元素，例如$("ul li:first-child")選取每個<ul>中第1個<li>元素
(3) :last-child 選取每個父元素的最後一個子元素
同樣，:last隻傳回單個元素，而:last-child選擇符将為每個父元素比對最後一個子元素
(4) :only-child 如果某個元素是它父元素中惟一的子元素，那麼将會被比對。如果父元素中含有其他元素則不會被比對
如：$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素
-
表單對象屬性過濾選擇器
(1) :enabled 選取所有可用元素
如：$("#form1 :enabled") 選取id為"form1"的表單内的所有可用元素
(2) :disabled 選取所有不可用元素
如：$("#form2 :disabled") 選取id為"form2"的表單内的所有不可用元素
(3) :checked 選取所有被選中的元素（單選框，複選框）
如：$("input:checked") 選取所有被選中的<input>元素
(4) :selected 選取所有被選中的選項元素（下拉清單）
如：$("select option:selected") 選取所有被選中的選項元素
- 表單選擇器
表單選擇器能極其友善地擷取到表單的某個或某類型的元素。
(1) :input 選取所有的<input>、<textarea>、<select>和<button>元素
如：$(":input")擷取所有的<input>、<textarea>、<select>和<button>元素
(2) :text 選取所有的單行文本框
如：$(":text")選取所有的單行文本框
(3) :password 選取所有的密碼框
如：$(":password")選取所有的密碼框
(4) :radio 選取所有的單選框
如：$(":radio")選取所有的單選框
(5) :checkbox 選取所有的多選框
如：$(":checkbox")選取所有的複選框
(6) :submit 選取所有的送出按鈕
如：$(":submit")選取所有的送出按鈕
(7) :image 選取所有的圖像按鈕
如：$(":image")選取所有的圖像按鈕
(8) :reset 選取所有的重置按鈕
如：$(":reset")選取所有的重置按鈕
(9) :button 選取所有的按鈕
如：$(":button")選取所有的按鈕
(10) :file 選取所有的上傳域
如：$(":file")選取所有的上傳域
(11) :hidden 選取所有不可見元素
如：$(":hidden")選取所有不可見元素（已經在不可見性過濾選擇器中講解過）
四. 請用jQuery手寫一段代碼，實作當按鈕被點選時以卷簾效果消失。
jQuery slideUp() 方法用于向上滑動元素。
$
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。
下面的例子示範了 slideUp() 方法：
$
五. 請寫出一個簡單地$.ajax()的請求方式（至少5個參數）。
$
$
var
六. 請寫出至少4種vue中的指令和它的用法。
七. 路由之間跳轉有哪些方式？
八. 請舉例說明axios的四種常用方法（請求方式）？
九. 請詳細說明對vue生命周期的了解？
十. 請簡述封裝vue元件的過程。
十一. window中的onload與jQuery中的ready有什麼差別？
（1）執行時間不同
一般情況下window的load()都是用來設定body标簽的onload事件.但onload事件是要在頁面的元素全部加載完了才觸發的,這也包括頁面上的圖檔媒體内容，以及大的表格資料。如果頁面上圖檔較多或圖檔太大,加載需要較多時間，就會導緻頁面無響應，或者使用者做了其它操作了。
缺點：如果加載圖檔和媒體内容花費了大量時間，使用者就會感受到定義在window.onload事件上的代碼在執行時，有明顯的延遲，影響使用者體驗。故load()一般不建議使用；
jQuery中的ready函數隻須等待DOM加載完畢，無須等待圖像或外部資源的加載，執行起來更快。
（2）執行次數不同
window.onload()隻能執行一次，如果第二次，那麼第一次的執行會被覆寫;
$(document).ready()可以執行多次，第N次都不會被上一次覆寫。
window.onload = function() { alert(“text1”) }
window.onload = function() { alert(“text2”) } // 結果隻輸出text2
$(document).ready(function(){alert(“Hello1”)})
$(document).ready(function(){alert(“Hello2”)}) // 結果兩個都會執行，輸出Hello1和Hello2
（3）簡化寫法不同
window.onload()無簡寫；
$(document).ready(function(){})可簡寫為$(function(){})
十二. window.onload 和 document.onDOMContentLoaded差別？
觸發的時機不同：
window.onload是在DOM樹建構完成、外部的js、css 、圖檔、flash等資源都加載完成後再觸發；
document.onDOMContentLoaded是在DOM樹建構完成後觸發。此機制更合理，因為我們可以容忍圖檔、flash等延遲加載，卻不可以容忍看見内容後頁面不可互動——影響使用者體驗。
附：關于js為什麼放到</body>的最後部分？
因為浏覽器的加載和渲染過程中，<script>放在前面而後續的DOM結構還沒有渲染加載出來，是以擷取不到，故最好放到</body>最後部分。
例如：https://jsbin.com/tacugeleva/edit?html,console,output
但如果非要放進<head>裡的話，必須寫成這樣：
document
十三. JavaScript中的事件處理如何運作？
事件流就是描述了頁面中接受事件的順序，在浏覽器發展的初期，兩大浏覽器廠商IE和Netscape互掐，他們對事件流的解釋出現了兩中截然相反的定義。也就是我們所熟悉的：IE的事件冒泡（向上傳遞），Netscape的事件捕獲（向下傳遞）。事件冒泡即事件最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播至最不具體的節點（文檔）。事件捕獲即事件最早由不太具體的節點接收，而最具體的節點最後接收到事件。
1.注冊事件處理程式的方式有3種：
（1）設定HTML标簽屬性為事件處理程式
文檔元素的事件處理程式屬性，其名字由“on”後面跟着事件名組成，例如：onclick、onmouseover。當然了，這種形式隻能為DOM元素注冊事件處理程式。
例如：
<
①因為HTML裡面不區分大小寫，是以這裡事件處理程式屬性名大寫、小寫、大小混寫均可，屬性值就是相應事件處理程式的JavaScript代碼；
②若給同一進制素寫多個onclick事件處理屬性，浏覽器隻執行第一個onclick裡面的代碼，後面的會被忽略；
③這種形式是在事件冒泡過程中注冊事件處理程式的；
（2）
DOM0級事件處理程式：設定JavaScript對象屬性為事件處理程式
可以通過設定某一事件目标的事件處理程式屬性來為其注冊相應的事件處理程式。事件處理程式屬性名字由“on”後面跟着事件名組成，例如：onclick、onmouseover。
①因為JavaScript是嚴格區分大小寫的，是以，這種形式下屬性名隻能按規定小寫；
②若給同一進制素對象寫多個onclick事件處理屬性，後面寫的會覆寫前面的（ps：這就是在修改一個對象屬性的值，屬性的值是唯一确定的）；
③這種形式也是在事件冒泡過程中注冊事件處理程式的；
<!DOCTYPE HTML>
（3）
DOM2級事件處理程式：addEventListener()
前兩種方式出現在Web初期，衆多浏覽器都有實作。而addEventListener()方法是标準事件模型中定義的。任何能成為事件目标的對象——這些對象包括Window對象、Document對象和所有文檔元素等——都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目标注冊事件處理程式。
addEventListener()接受三個參數：
第一個參數是要注冊處理程式的事件類型，其值是字元串，但并不包括字首“on”；第二個參數是指當指定類型的事件發生時應該調用的函數；第三個參數是布爾值，其可以忽略（某些舊的浏覽器上不能忽略這個參數），預設值為false，這種情況是在事件冒泡過程中注冊事件處理程式，當其為true時就是在事件捕獲過程中注冊事件處理程式。
①通過addEventListener()方法給同一對象注冊多個同類型的事件，并不會發生忽略或覆寫，而是會按順序依次執行；
②相對addEventListener()的是removeEventListener()方法，它表示從對象中删除某個事件處理函數。它同樣有三個參數，前兩個參數自然跟addEventListener()的意義一樣，而第三個參數也隻需跟相應的addEventListener()的第三個參數保持一緻即可，同樣可以省略，預設值為false。
DOM2級事件規定事件包括三個階段：事件捕獲階段->處于目标階段->事件冒泡階段 。
<!DOCTYPE HTML>
（4）attachEvent()
但是，IE8以及其之前版本的浏覽器并不支援addEventListener()和removeEventListener()。相應的，IE定義了類似的方法attachEvent()和detachEvent()。因為IE8以及其之前版本浏覽器也不支援事件捕獲隻支援事件冒泡，是以attachEvent()并不能注冊捕獲過程中的事件處理函數。是以attachEvent()和detachEvent()要求隻有兩個參數：事件類型和事件處理函數。而且，它們的第一個參數使用了帶“on”字首的事件處理程式屬性名。
var
2. 事件處理程式調用時的一些問題
(1)事件處理程式的參數
通常事件對象作為參數傳遞給事件處理函數，但IE8以及其之前版本的浏覽器中全局變量event才是事件對象。是以，我們在寫相關代碼時應該注意相容性問題。
<!DOCTYPE HTML>
（2）事件處理程式的運作環境
事件處理程式的運作環境，也就是在事件處理程式中調用上下文（this值）的指向問題：
<
3.多個事件處理程式調用規則如下:
(1)通過HTML屬性注冊的處理程式和通過設定對象屬性的處理程式一直優先調用;(即方法1和方法2)
(2)使用addEventListener()注冊的處理程式按照它們的注冊順序依次調用;(即方法3)
(3)使用attachEvent()注冊的處理程式可能按照任何順序調用，是以代碼不應該依賴于調用順序;(即方法4)
十四. vue-webpack中并沒有scss，我們要在vue中使用sass需要怎麼配置？
1、安裝sass的依賴包
cnpm install --save-dev sass-loader // sass-loader依賴于node-sass
cnpm install --save-dev node-sass
2、在build檔案夾下的webpack.base.conf.js找到module.exports裡的module，rules裡面添加如下配置：
3、在APP.vue中修改style标簽：<style>
<
十五. 請說出至少3種減少頁面加載時間的方法
①減少HTTP請求（合并圖檔，合并檔案）
②優化圖檔，減小其尺寸
③選擇合适的圖像格式（gif可用于顔色要求不高的地方）
④壓縮JS，CSS代碼，把CSS放在頂部，把JS放在底部，最好把CSS和JS放到外部檔案
⑤伺服器啟用gzip功能
将要傳輸的檔案壓縮後傳輸到用戶端再解壓，在網絡傳輸資料量會大幅減小。在伺服器上的Apache、Nginx可直接啟用，也可用代碼直接設定傳輸檔案頭，增加gzip的設定，也可從負載均衡裝置直接設定。不過需要留意的是，這個設定會略微增加伺服器的負擔。伺服器性能不是很好的網站，要慎重考慮。
⑥标明寬度及高度
标明高度和寬度（如果浏覽器沒有找到這兩個參數，它需要一邊下載下傳圖檔一邊計算大小，如果圖檔很多，浏覽器需要不斷地調整頁面。這不但影響速度，也影響浏覽體驗。
當浏覽器知道了高度和寬度參數後，即使圖檔暫時無法顯示，頁面上也會騰出圖檔的空位，然後繼續加載後面的内容。進而加載時間快了，浏覽體驗也更好了）
⑦網址後面加斜杠“/”(加了斜杠會減少一次判斷過程，直接傳回網站設定的存放在網站根目錄下的預設頁面)
如http://www.campr.com/目錄，會判斷這個目錄是什麼檔案類型，或者是目錄。
⑧避免空的src和href
⑨避免跳轉
⑩盡量采用GET方法調用
⑪使用CDN(Content Delivery Network)網絡加速
簡單講，就是将你的圖檔、視訊擴散到CDN網絡所能到達之處，讓使用者通路時能就近下載下傳到這些檔案，進而達到網絡提速的目的，這樣做，同時能減輕你自己網站的負載。
本文引用參考：
webpack+vue 建構項目步驟并且使用sass 安裝配置blog.csdn.net window的onload事件與jQuery中的ready事件有什麼不同？blog.csdn.net jquery 的ready() 與window.onload()的差別www.cnblogs.com 請說明JavaScript中處理事件的步驟_百度知道zhidao.baidu.com
JavaScript事件處理的方式(三種)blog.csdn.net 請說出三種減少頁面加載時間的方法__牛客網www.nowcoder.com
HTML：減少頁面加載時間的方法 - CuriousZero - 部落格園www.cnblogs.com 請說出三種減少頁面加載時間的方法？www.jianshu.com