十二火俄、JavaScript的DOM特效

在web瀏覽器上犯建，window對象是一個全局對象，代表web瀏覽器中一個打開的窗口（包括選項卡瓜客、地址欄适瓦、收藏夾、和網(wǎng)頁等）谱仪，所以玻熙，每個打開的窗口都是一個window對象，document是window對象的一個屬性疯攒，由于document屬性的取值是一個對象嗦随，所以document屬性是一個對象類型的屬性，其取值叫做document對象敬尺，document對象是一個web瀏覽器宿主對象枚尼，代表當前窗口中的整個網(wǎng)頁，保存了網(wǎng)頁上所有的內(nèi)容砂吞，通過document對象就可以操作網(wǎng)頁上的內(nèi)容了署恍，DOM的全稱是Document Object Model（文檔對象模型），代表了document對象（整個網(wǎng)頁）的樹狀結(jié)構(gòu)的模型蜻直，DOM 定義了訪問和操作 HTML文檔（網(wǎng)頁）的標準方法盯质，所以，學習DOM就是學習如何通過document對象操作網(wǎng)頁上的內(nèi)容概而，在JS中呼巷，HTML標簽就叫做DOM元素，使用document的時候前面可以省略window赎瑰，document對象調(diào)用它的getElementById方法可以返回在此頁面上所找到的傳入id名稱字符串所指代的DOM元素王悍，由于id名稱不可以重復，所以當找到了此DOM元素時乡范，返回值是一個將此DOM元素包裝成的對象（是被瀏覽器宿主對象HTMLDivElement包裝的）配名，當找不到此DOM元素時啤咽，返回值是null，例如“l(fā)et oDiv = document.getElementById (“box”);”渠脉，由于類名宇整、name值、和標簽名稱是可以重復的芋膘，所以document對象調(diào)用它的getElementsByClassName/getElementsByName/getElementsByTagName方法可以返回在此頁面上所找到的傳入類名/name值/標簽名稱字符串所指代的所有DOM元素所組成的偽數(shù)組鳞青，當找不到此DOM元素時，返回值是一個空數(shù)組为朋，但getElementsByName方法在不同web瀏覽器中工作方式是不同的臂拓，在IE和Opera中，所返回的數(shù)組中還包括那些id屬性為指定值的DOM元素习寸，document對象調(diào)用它的querySelector/querySelectorAll方法（推薦）可以返回在此頁面上所找到的傳入選擇器（標簽/id/類/后代選擇器...）字符串所指代的首個DOM元素/所有DOM元素所組成的偽數(shù)組胶惰，當找不到此DOM元素時，返回值是null/空數(shù)組霞溪，例如“l(fā)et oDiv = document.querySelector (“#box”);”孵滞，“l(fā)et oDiv = document.querySelector (“div>form”);”，“l(fā)et oDivs = document.querySelectorAll (“.father”);”鸯匹，DOM元素訪問它的tagName屬性可以返回此DOM元素的名稱字符串坊饶，DOM元素訪問它的children/childNodes屬性可以返回此DOM元素內(nèi)部所有子DOM元素/節(jié)點對象所組成的偽數(shù)組（節(jié)點包括DOM元素節(jié)點、屬性節(jié)點殴蓬、和文本節(jié)點匿级，但這里的“子節(jié)點對象”指的是DOM元素和文本對象），例如“l(fā)et oDiv = document.querySelector (“div”); ?console.log (oDiv.children);”染厅，節(jié)點對象訪問它的nodeType屬性可以返回此節(jié)點類型的數(shù)值代號痘绎，1代表DOM元素，3代表文本糟秘，例如“for (let node of oDiv.childNodes) {console.log (node.nodeType);}”简逮，數(shù)值1可以用“Node.ELEMENT_NODE;(//返回值是1)”來表示，節(jié)點對象訪問它的nodeName/nodeValue屬性可以返回此節(jié)點的節(jié)點名稱/取值字符串（nodeName屬性的返回值可以是DOM元素名稱/屬性節(jié)點字符串/“#text”尿赚，nodeValue屬性的返回值可以是null/屬性節(jié)點值/“文本內(nèi)容”），DOM元素訪問它的firstChild/lastChild屬性可以返回此DOM元素內(nèi)部的首個/最后一個子節(jié)點對象蕉堰，例如“l(fā)et oDiv = document.querySelector (“div”); ?console.log (oDiv.firstChild);”凌净，DOM元素訪問它的firstElementChild/lastElementChild屬性可以返回此DOM元素內(nèi)部的首個/最后一個子DOM元素，DOM元素訪問它的parentElement/parentNode屬性可以返回此DOM元素的父DOM元素/節(jié)點對象屋讶，但在火狐9之前冰寻，只支持parentNode屬性，不支持parentElement屬性皿渗，所以斩芭，當想要做兼容性處理時轻腺，示例為“l(fā)et oUl = oLi.parentElement || oLi.parentNode;”，DOM元素訪問它的previousSibling/nextSibling屬性可以返回此DOM元素的上/下一個節(jié)點對象划乖，DOM元素訪問它的previousElementSibling/nextElementSibling屬性可以返回此DOM元素的上/下一個DOM元素贬养，document對象調(diào)用它的createElement方法可以返回所創(chuàng)建的傳入DOM元素名稱字符串所指代的DOM元素，格式為“l(fā)et oDiv = document.createElement (“div”);”琴庵，DOM元素調(diào)用它的appendChild方法可以在此DOM元素內(nèi)部的最后位置添加所傳入的DOM元素误算，例如“oUl.appendChild (oLi);”，DOM元素調(diào)用它的insertBefore方法可以將參數(shù)1DOM元素添加到此DOM元素內(nèi)部的參數(shù)2DOM元素的前面迷殿，格式為“oUl.insertBefore (oLi1, oLi2);”儿礼，DOM元素調(diào)用它的removeChild方法可以刪除此DOM元素內(nèi)部所傳入的子DOM元素，格式為“oDiv.removeChild (oP);(//當不傳參/刪除不存在的DOM元素時庆寺，就會報錯蚊夫，當想要讓某個DOM元素自我刪除時，可以讓此DOM元素的parentElement/parentNode對象調(diào)用它的removeChild方法懦尝，并傳入此DOM元素)”这橙，DOM元素調(diào)用它的cloneNode方法可以返回被克隆的此DOM元素（當傳入true時包括此DOM元素內(nèi)部的子DOM元素，當傳入false/不傳參時則不包括）导披，由于調(diào)用querySelector/createElement方法所返回/創(chuàng)建的DOM元素屈扎，系統(tǒng)都會將它包裝成一個對象，并且會將它的屬性和方法都添加給這個對象撩匕，所以鹰晨，可以利用DOM元素來訪問/調(diào)用它的屬性/方法，通過“console.dir ();”可以在控制臺以目錄結(jié)構(gòu)的方式顯示一個對象所有的屬性和方法止毕，DOM元素訪問它的屬性節(jié)點名稱可以返回/修改/刪除此DOM元素系統(tǒng)自帶屬性節(jié)點的取值（當訪問的是class屬性時模蜡，要改寫成className，這是因為class在ES6中是一個用于定義類的聲明符扁凛，所以為了避免產(chǎn)生沖突就改用了className作為JS屬性的名稱忍疾，對于取值跟屬性相同的屬性節(jié)點，當給它賦值true時谨朝，就代表新增此屬性節(jié)點卤妒，當給它賦值false時，就代表刪除此屬性節(jié)點）字币，格式為“console.log (oDiv.title);”则披，“oDiv.title = “hello world”;(//沒有就新增)”，“oDiv.title = “”;(//只會刪除取值洗出，屬性節(jié)點還在)”士复，DOM元素調(diào)用它的getAttribute/setAttribute/removeAttribute方法可以返回/修改/刪除此DOM元素的傳入系統(tǒng)自帶/自定義屬性節(jié)點字符串的取值，格式為“console.log (oDiv.getAttribute (“title”) );(//另外翩活，當給某個DOM元素設置了data-xxx這種形式的自定義屬性節(jié)點時阱洪，可以使用“oDiv.dataset.xxx;”的形式返回此屬性節(jié)點的取值)”便贵，“oDiv.setAttribute (“title”, “hello world”);(//沒有就新增)”，“oDiv.removeAttribute (“title”);(//會將屬性節(jié)點和取值同時刪除)”冗荸，DOM元素訪問它的innerHTML/innerText屬性既可以返回此DOM元素內(nèi)部包含/不包含兩端空格和HTML標簽的內(nèi)容字符串承璃，也可以給此DOM元素設置包含HTML標簽/普通（即出現(xiàn)HTML標簽時會當成普通的字符串）的內(nèi)容字符串，DOM元素訪問它的textContent屬性既可以返回此DOM元素內(nèi)部包含兩端空格但不包含HTML標簽的內(nèi)容字符串俏竞，也可以給此DOM元素設置普通的內(nèi)容字符串绸硕，DOM元素訪問它的style屬性可以返回此DOM元素的行內(nèi)樣式對象，此行內(nèi)樣式對象訪問它的行內(nèi)樣式屬性名稱可以返回/設置此DOM元素相應行內(nèi)樣式屬性的取值字符串（優(yōu)先級最高魂毁，兼容任何瀏覽器玻佩，當設置時，取值別忘了加引號和單位名稱席楚，當行內(nèi)樣式屬性的名稱帶有中劃線時咬崔，要改成駝峰命名），格式為“oDiv.style.lineHeight = “30px”;”烦秩，或者我們可以先用一個自定義類名設置好CSS樣式垮斯，再利用DOM元素訪問它的className屬性來給此DOM元素設置此類名即可，DOM元素訪問它的classList屬性可以返回一個只讀的DOMTokenList 對象（包含了此DOM元素所有類名的對象）只祠，DOMTokenList對象調(diào)用它的add/remove/toggle方法可以給調(diào)用者添加/刪除一/多個所傳入的類名字符串/切換add和remove的狀態(tài)兜蠕，當調(diào)用者擁有所傳入的類名時，add方法不會重復去添加抛寝，DOMTokenList對象調(diào)用它的item方法可以返回傳入索引值所對應的類名字符串熊杨，當索引值在區(qū)間范圍之外時，返回值是null盗舰，DOMTokenList對象調(diào)用它的contains方法可以判斷調(diào)用者是否擁有所傳入的類名字符串晶府，返回值是true/false，window對象調(diào)用它的getComputedStyle方法或DOM元素訪問它的currentStyle屬性都可以返回此DOM元素的樣式對象钻趋，格式為“getComputedStyle (oDiv);(//只支持高級瀏覽器)”川陆，“oDiv.currentStyle;(//只支持低級瀏覽器)”，此樣式對象訪問此DOM元素的行內(nèi)樣式/CSS屬性名稱只可以返回（只讀屬性蛮位，無法設置）相應屬性的取值字符串较沪，格式為“console.log (getComputedStyle (oDiv).lineHeight);(//只支持高級瀏覽器)”，“console.log (oDiv.currentStyle.lineHeight);(//只支持低級瀏覽器)”土至，offset购对、client、和scroll類的JS屬性統(tǒng)稱為JS的三大家族陶因，DOM元素訪問它的offsetWidth/offsetHeight屬性只可以返回（只讀屬性，無法設置）此DOM元素整體（即border+padding+內(nèi)容）的寬/高度值（無論是通過行內(nèi)樣式還是CSS屬性設置的垂蜗，兼容任何瀏覽器）楷扬，DOM元素訪問它的offsetLeft/offsetTop屬性可以返回此DOM元素的左/上邊緣與其最近的定位流上級DOM元素的左/上邊緣的距離值（即“偏移位”值）解幽，當其不存在定位流的上級DOM元素時，就以<body>元素作為默認的參考點（注意不存在offsetRight/offsetBottom屬性）烘苹，DOM元素訪問它的offsetParent屬性可以返回跟此DOM元素最近的定位流的上級DOM元素躲株，當其不存在定位流的上級DOM元素時，返回值是body對象镣衡，DOM元素訪問它的clientWidth/clientHeight屬性可以返回此DOM元素除了border部分以外整體的寬/高度值霜定，DOM元素訪問它的clientLeft/clientTop屬性可以返回此DOM元素border-left/top-width的數(shù)值（注意不存在clientRight/clientBottom屬性），DOM元素訪問它的scrollWidth/scrollHeight屬性可以返回此DOM元素的clientWidth/clientHeight值與超出clientWidth/clientHeight范圍的內(nèi)容的寬/高度值之和廊鸥，DOM元素訪問它的scrollLeft/scrollTop屬性可以返回此DOM元素的橫/豎向滾動條滾出的距離值望浩，document對象訪問它的compatMode屬性可以返回此html網(wǎng)頁在此web瀏覽器上的渲染模式字符串，“CSS1Compat”代表標準模式（默認）惰说，“BackCompat”代表混雜（怪異）模式磨德，當網(wǎng)頁沒有書寫文檔聲明時，就會按照混雜（怪異）模式來進行渲染吆视，window對象訪問它的innerWidth/innerHeight屬性可以返回此web瀏覽器窗口當前的寬/高度值典挑，可隨窗口大小的變化而變化，當存在滾動條時啦吧，滾動條的寬度值也算在內(nèi)您觉，支持高級瀏覽器的各種模式，document對象訪問它的documentElement屬性可以返回<html>元素（即整個網(wǎng)頁）授滓，<html>/<body>元素訪問它的clientWidth/clientHeight屬性也可以返回此web瀏覽器窗口當前的寬/高度值琳水，可隨窗口大小的變化而變化，當存在滾動條時褒墨，滾動條的寬度值不算在內(nèi)炫刷，例如“document.documentElement.clientWidth;(//支持低級瀏覽器的標準模式)”，“document.body.clientWidth;(//支持低級瀏覽器的混雜模式)”郁妈，當想要做兼容性處理時浑玛，可以自己封裝一個獲取此web瀏覽器窗口當前的寬/高度值的函數(shù)，例如“function getScreen () {let width, height; ?if (window.innerWidth) {width = window.innerWidth; ?height = window.innerHeight;} else if (document.compatMode === “BackCompat”) {width = document.body.clientWidth; ?height = document.body.clientHeight;} else {width = document.documentElement.clientWidth; ?height = document.documentElement.clientHeight;} ?return {width: width, height: height} }”噩咪，window對象訪問它的pageXOffset/pageYOffset屬性可以返回此web瀏覽器窗口的橫/豎向滾動條滾出的距離值（支持高級瀏覽器的各種模式）顾彰，<html>/<body>元素訪問它的scrollLeft/scrollTop屬性可以返回/設置此web瀏覽器窗口的橫/豎向滾動條滾出的距離值，例如“document.documentElement.scrollTop;(//支持低級瀏覽器的標準模式)”胃碾，“document.body.scrollTop;(//支持低級瀏覽器的混雜模式)”涨享，當想要做兼容性處理時，可以自己封裝一個獲取此web瀏覽器窗口的橫/豎向滾動條滾出的距離值的函數(shù)仆百，例如“function getPageScroll () {let x, y; ?if (window.pageXOffset) {x = window.pageXOffset; ?y = window.pageYOffset;} else if (document.compatMode === “BackCompat”) {x = document.body.scrollLeft; ?y = document.body.scrollTop;} else {x = document.documentElement.scrollLeft; ?y = document.documentElement.scrollTop;} ?return {x: x, y: y} }”食磕，window對象調(diào)用它的scrollTo方法可以分別讓此web瀏覽器窗口的橫豎滾動條滾出所傳入的距離值怕敬，格式為“window.scrollTo (x, y);(//x表示橫向距離值蝉娜，y表示豎向距離值)”甘晤，在谷歌瀏覽器中，默認情況下不允許在播放本地<audio>文件時進行播放進度的跳轉(zhuǎn)，也就是在播放本地<audio>文件時設置其currentTime值是無效的，只有把應用程序部署到web服務器，然后通過web服務器的URL打開此html網(wǎng)頁排龄，然后再設置相應<audio>文件的currentTime值才有效（也就是說只有在http協(xié)議下才有效），默認情況下也不允許自動播放<audio>/<video>翎朱，只有用戶和網(wǎng)頁交互之后才可以播放<audio>/<video>橄维，但我們可以通過修改谷歌瀏覽器的設置來自動播放<audio>/<video>，先在地址欄輸入“chrome://flags/”并敲回車拴曲，然后在搜索框輸入“autoplay”并敲回車争舞，最后把“Autoplay policy”選項的設置改為“no user gesture is required”即可，或者給<video>設置muted屬性也可以解決此問題（經(jīng)測試只適用于<video>疗韵，<audio>無效兑障，谷歌瀏覽器這么設置估計是因為網(wǎng)頁上面的垃圾廣告實在是太多了，只有這樣才能最大程度的避免用戶被打擾到）蕉汪，<audio>/<video>元素調(diào)用它的play/pause方法可以開始/暫停播放此<audio>/<video>流译，<audio>/<video>元素訪問它的duration屬性可以返回此<audio>/<video>的總秒數(shù)值（可以是小數(shù)），<audio>/<video>元素訪問它的currentTime屬性可以返回/設置此<audio>/<video>當前播放進度的秒數(shù)值（可以是小數(shù)）者疤，<audio>/<video>元素訪問它的volume屬性可以返回/設置此<audio>/<video>的音量（取值范圍是0~1福澡，0代表靜音，1代表音量最大）驹马，video元素調(diào)用它的requestFullscreen方法可以將此video全屏顯示革砸，但是有兼容性問題，可以上百度搜索“requestFullscreen mdn”糯累，然后進入此mdn官方文檔算利，將他封裝好的兼容各瀏覽器的函數(shù)復制粘貼過來，直接調(diào)用即可泳姐，<input>輸入框元素訪問它的value屬性可以返回/設置此單行文本輸入框中的內(nèi)容字符串效拭，<input>輸入框元素調(diào)用它的focus/blur方法可以賦予/移除此單行文本輸入框的光標，document對象訪問它的readyState屬性可以返回此html頁面載入狀態(tài)的字符串胖秒，“uninitialized”代表還未開始載入缎患，“l(fā)oading”代表載入中，“interactive”代表已加載阎肝，此HTML文檔與用戶可以開始交互挤渔，“complete”代表載入完成，用戶和瀏覽器之間的交互行為就叫做事件风题，比如“點擊”判导、“移入”嫉父、“移出”等，在JS中所有的DOM元素都可以綁定事件骡楼，當想要移除所綁定的事件時熔号，只需再次給此事件賦值null/undefined就可以了稽鞭，通過賦值的方式綁定事件的格式為“DOM元素/window對象.帶有on的事件名稱 = function () {可執(zhí)行的代碼;};(//后綁定的同名事件會覆蓋先綁定的同名事件)”鸟整，當所對應的事件被觸發(fā)時，就會執(zhí)行后面的回調(diào)函數(shù)朦蕴，由于事件就類似于一個方法篮条，所以也可以手動通過“DOM元素.事件名稱 ();”的形式去觸發(fā)，DOM元素/window對象調(diào)用它的addEventListener/attachEvent方法也可以給此DOM元素/瀏覽器窗口綁定事件吩抓，并且后綁定的同名事件不會覆蓋先綁定的同名事件涉茧，格式為“oBtn.addEventListener (“去掉on的事件名稱”, function () {可執(zhí)行的代碼;});(//只支持IE9及以上的高級瀏覽器，并且當綁定多個同名事件時疹娶，觸發(fā)的順序是正向的)”伴栓，“oBtn.attachEvent (“帶有on的事件名稱”, function () {可執(zhí)行的代碼;} );(//只支持IE9以下的低級瀏覽器，并且當綁定多個同名事件時雨饺，觸發(fā)的順序是逆向的)”钳垮，當想要做兼容性處理時，可以自己封裝一個綁定事件的函數(shù)额港，例如“function addEvent (ele, name, fn) {if (ele.attachEvent) {ele.attachEvent (“on”+ name, fn);} else {ele.addEventListener (name, fn); } }”饺窿，DOM元素/window對象調(diào)用它的removeEventListener方法可以移除通過調(diào)用addEventListener方法所添加的事件，但addEventListener方法的事件監(jiān)聽器必須使用外部函數(shù)移斩，例如“oBtn.addEventListener (“click”, myFunction);”肚医，“oBtn.removeEventListener (“click”, myFunction);”，一個事件被觸發(fā)需要經(jīng)過三個階段向瓷，事件捕獲階段肠套、當前目標階段、和事件冒泡階段猖任，當此DOM元素的父DOM元素也綁定了此事件時你稚，會首先捕獲到此事件的觸發(fā)，這就叫做事件捕獲階段超升，然后再將此事件傳遞給此DOM元素并觸發(fā)入宦，這就叫做當前目標階段，最后再將此事件拋出去室琢，先拋給它綁定了此事件的父DOM元素并觸發(fā)乾闰，然后再向上一級拋，以此類推盈滴，IE6瀏覽器會一直拋到document對象為止涯肩，其他瀏覽器會一直拋到window對象為止轿钠，這就叫做事件冒泡階段，有些事件是不能冒泡的病苗，比如blur疗垛、focus、load硫朦、和unload事件贷腕，由于早期各大web瀏覽器廠商搶占市場，對事件的理解又不同咬展，所以導致了這三個階段只有兩個會同時執(zhí)行泽裳，要么捕獲和當前，要么當前和冒泡破婆，后來W3C為了兼容涮总，將兩種方式都納入了標準，當調(diào)用addEventListener方法綁定事件時祷舀，可以傳入三個參數(shù)瀑梗，第三個參數(shù)是false/true，false代表冒泡裳扯，true代表捕獲抛丽，當通過賦值的方式綁定事件時，由于無法傳入任何參數(shù)嚎朽，所以默認就是冒泡铺纽，當調(diào)用attachEvent方法綁定事件時，由于只能傳入兩個參數(shù)哟忍，所以默認也是冒泡狡门，使用最多的就是事件冒泡，當想要阻止事件冒泡時锅很，就在回調(diào)函數(shù)作用域中添加一句“event.stopPropagation ();(//只支持高級瀏覽器)”/“event.cancelBubble = true;(//兼容任何瀏覽器)”即可其馏，當所綁定的事件被觸發(fā)時，系統(tǒng)自動創(chuàng)建的對象就叫做事件對象爆安，在IE9及以上的高級瀏覽器中叛复，系統(tǒng)會將事件對象當做實參傳入回調(diào)函數(shù)的作用域中，而在IE9以下的低級瀏覽器中則不會扔仓，需要在回調(diào)函數(shù)的作用域中通過“window.event;”來獲群职隆（返回）事件對象，所以翘簇，獲取事件對象的兼容性寫法的格式為“oBtn.onclick = function (event) {event = event || window.event;}”撬码，在JS中，由于a和input按鈕等元素被系統(tǒng)綁定了默認事件版保，所以當我們手動給某個DOM元素綁定了跟系統(tǒng)同名的事件時呜笑，手動綁定的不會覆蓋掉跟系統(tǒng)同名的夫否，當想要覆蓋掉時（即阻止默認行為/移除默認事件），就在回調(diào)函數(shù)作用域的結(jié)尾處添加一句“event.preventDefault ();(//只支持高級瀏覽器)”/“event.returnValue = false;(//只支持低級瀏覽器)”/“return false;(//兼容任何瀏覽器叫胁，推薦)”即可凰慈，事件對象訪問它的target屬性可以返回觸發(fā)此事件的DOM元素/其內(nèi)部的相應子DOM元素，可以實現(xiàn)用父DOM元素來監(jiān)聽子DOM元素驼鹅，事件對象訪問它的offsetX/offsetY屬性可以返回觸發(fā)此事件的點與此DOM元素左/上邊緣的距離值微谓，事件對象訪問它的clientX/clientY屬性可以返回觸發(fā)此事件的點與網(wǎng)頁可視區(qū)域（不包括滾動條滾出的區(qū)域）的左/上邊緣的距離值，事件對象訪問它的pageX/pageY屬性可以返回觸發(fā)此事件的點與整個網(wǎng)頁（包括滾動條滾出的區(qū)域）的左/上邊緣的距離值（只支持高級瀏覽器）谤民，事件對象訪問它的screenX/screenY屬性可以返回觸發(fā)此事件的點與顯示器的左/上邊緣的距離值（不是很常用）堰酿，給DOM元素所綁定的onclick事件的觸發(fā)條件是此DOM元素被用鼠標左鍵單擊，例如“oA.onclick = function () {alert (“<a>被點擊了”); ?return false;};”张足，給DOM元素所綁定的ondblclick事件的觸發(fā)條件是此DOM元素被用鼠標左鍵雙擊，給<body>/<input>輸入框元素所綁定的onkeyup/onkeydown事件的觸發(fā)條件是此鍵盤上的某個按鍵被松開/按下坎藐，例如“document.body.onkeydown = function (event) {console.log (event.keyCode); ?console.log (event.key);};(//此時形參event所接收到的事件對象是鍵盤上被按下的那個按鍵對象为牍，按鍵對象訪問它的key屬性可以返回被按下的那個鍵子名稱的字符串，按鍵對象訪問它的keyCode屬性可以返回被按下的那個鍵子名稱的十進制Unicode數(shù)值即鍵碼值)”岩馍，給DOM元素所綁定的onmouseover/onmouseout事件的觸發(fā)條件是鼠標移入/出此DOM元素碉咆，但無法阻止事件冒泡，給DOM元素所綁定的onmouseenter/onmouseleave事件的觸發(fā)條件是鼠標移入/出此DOM元素蛀恩，可以阻止事件冒泡（推薦）疫铜，給DOM元素所綁定的onmousemove事件的觸發(fā)條件是鼠標在此DOM元素中移動，給DOM元素/window對象所綁定的onscroll事件的觸發(fā)條件是此DOM元素/瀏覽器窗口的滾動條發(fā)生滾動双谆，給DOM元素所綁定的onmousedown事件的觸發(fā)條件是在此DOM元素內(nèi)鼠標任意按鍵被按下壳咕，給DOM元素/document對象所綁定的onmouseup事件的觸發(fā)條件是在此DOM元素/頁面內(nèi)鼠標任意按下的按鍵被松開，給<input>輸入框元素所綁定的onfocus/onblur事件的觸發(fā)條件是此單行文本輸入框獲取/失去了焦點顽馋，給<input>輸入框元素所綁定的onchange事件的觸發(fā)條件是此單行文本輸入框中的內(nèi)容發(fā)生了改變谓厘，并且此單行文本輸入框失去了焦點，但只有手動輸入的才有效寸谜，使用JS中的value屬性給此單行文本輸入框所添加的無效竟稳，給<input>輸入框元素所綁定的oninput/onpropertychange事件的觸發(fā)條件是此單行文本輸入框的內(nèi)容發(fā)生了改變（實時監(jiān)聽），但只有手動輸入的才有效熊痴，使用JS中的value屬性給此單行文本輸入框所添加的無效他爸，oninput事件只支持高級瀏覽器，onpropertychange事件只支持低級瀏覽器果善，給window對象所綁定的onresize事件的觸發(fā)條件是此web瀏覽器窗口的寬/高度發(fā)生了變化诊笤，給window對象/<img>元素所綁定的onload/onerror事件的觸發(fā)條件是整個頁面的DOM元素/此img及相關(guān)資源加載成功/失敗，當想要解決流式布局中此頁面上所createElement的<img>元素的重疊問題時岭埠，有兩種方式盏混，第一種是等oImg.onload之后再流式布局蔚鸥，第二種是首先通過JSON獲取到<img>的寬高，然后在createElement<img>元素的時候直接設置<img>元素的寬高许赃，給document對象所綁定的DOMContentLoaded事件的觸發(fā)條件是整個頁面的DOM元素加載完畢（此事件只能通過調(diào)用addEventListener方法來綁定止喷，只支持高級瀏覽器，性能優(yōu)于onload事件）混聊，給document對象所綁定的onreadystatechange事件的觸發(fā)條件是document對象的readyState值發(fā)生了改變（此事件只能通過調(diào)用attachEvent方法來綁定弹谁，不用去掉on，只支持低級瀏覽器）句喜，給<audio>/<video>元素所綁定的oncanplay事件的觸發(fā)條件是此<audio>/<video>預加載完畢预愤，可以開始播放了，給<audio>/<video>元素所綁定的ontimeupdate事件的觸發(fā)條件是此<audio>/<video>的播放進度發(fā)生了更改咳胃，給<audio>/<video>元素所綁定的onended事件的觸發(fā)條件是此<audio>/<video>播放完畢植康，給<audio>/<video>元素所綁定的ondurationchange事件的觸發(fā)條件是此<audio>/<video>的總時長發(fā)生變化（由于<audio>/<video>一旦預加載完畢，其總時長就會由NaN變?yōu)槠鋵嶋H的總時長展懈，所以當ondurationchange事件被觸發(fā)時销睁，此<audio>/<video>一定預加載完畢了，可以開始播放了存崖，當想要做兼容性處理時冻记，可以使用ondurationchange事件代替oncanplay事件，詳見Player.vue）来惧，給DOM元素所綁定的ontouchstart事件的觸發(fā)條件是在移動端此DOM元素內(nèi)手指被按下冗栗，給DOM元素所綁定的ontouchend事件的觸發(fā)條件是在移動端此DOM元素內(nèi)按下的手指被抬起，給DOM元素所綁定的ontouchmove事件的觸發(fā)條件是在移動端此DOM元素內(nèi)手指被按下并移動供搀，移動端這三個touch類事件有一個事件對象隅居，此事件對象訪問它的touches屬性可以返回此屏幕上所有手指對象所組成的偽數(shù)組，此事件對象訪問它的targetTouches屬性可以返回此DOM元素上所有手指對象所組成的偽數(shù)組趁曼，此事件對象訪問它的changedTouches屬性可以返回此屏幕上剛剛增加/減少的手指對象所組成的偽數(shù)組军浆，每個手指對象都有clientX/clientY屬性、pageX/pageY屬性挡闰、和screenX/screenY屬性乒融，在一個DOM元素覆蓋了另一個DOM元素，并且給上面的DOM元素綁定了touchstart事件摄悯，給下面的DOM元素綁定了click事件時赞季，由于click事件的觸發(fā)有100~300ms的延遲（即在你click完100~300ms之后，系統(tǒng)才會感知到你click了）奢驯，而touchstart事件卻沒有申钩，所以一旦手指觸摸到了上面的DOM元素，在觸發(fā)上面的DOM元素所綁定的touchstart事件之后瘪阁，當上面的DOM元素消失時撒遣，也會觸發(fā)下面的DOM元素所綁定的click事件（當上面的DOM元素不消失時邮偎，就不會觸發(fā)下面的DOM元素所綁定的click事件），這就叫做移動端的點透問題（即事件擴散）义黎，此問題的解決方案一禾进，在給上面的DOM元素綁定touchstart事件的時候，在回調(diào)函數(shù)作用域的結(jié)尾處添加一句“event.preventDefault ();”來阻止事件擴散廉涕，解決方案二泻云，是引入Zepto.js類庫，然后使用tag事件代替click事件狐蜕，但是需要注意老版本的Zepto.js類庫也會出現(xiàn)點透問題宠纯，解決方案三，是引入fastclick.js插件层释，這是一個基于JS的插件婆瓜，網(wǎng)址是“github.com/ftlabs/fastclick”，此網(wǎng)頁的“Usage”部分就是使用方法湃累，這是最早解決點透問題的插件勃救，此插件里的click事件并不是原生JS的click事件，已經(jīng)解決了100~300ms延遲的問題治力，在JS中，有重復執(zhí)行和只執(zhí)行一次的定時器勃黍，全局對象調(diào)用它的setInterval/setTimeout方法可以啟動重復執(zhí)行/只執(zhí)行一次的定時器宵统，格式為“setInterval (function () {重復執(zhí)行的代碼;}, 毫秒值);(//意思是每隔多少毫秒執(zhí)行一次代碼)”，“setTimeout (function () {只執(zhí)行一次的代碼;}, 毫秒值);(//意思是多少毫秒后執(zhí)行代碼)”覆获，這兩種方法的返回值都是此定時器唯一的標識符马澈，全局對象調(diào)用它的clearInterval/clearTimeout方法可以關(guān)閉相應重復執(zhí)行/只執(zhí)行一次的定時器，格式為“clearInterval (setInterval方法的返回值)”弄息，“clearTimeout (setTimeout方法的返回值);”痊班，例如“startBtn.onclick = function () {id = setInterval (function () {console.log (“隨便寫點”);}, 1000);} ?closeBtn.onclick = function () {clearInterval (id);}”，函數(shù)防抖和節(jié)流都是用來優(yōu)化高頻率執(zhí)行的JS代碼的一種手段摹量，可以讓高頻觸發(fā)的事件（比如oninput/onmousemove/onscroll/onresize等事件）在觸發(fā)過程中涤伐，減少事件監(jiān)聽器的執(zhí)行次數(shù)，節(jié)省網(wǎng)頁的性能缨称，函數(shù)防抖可以在連續(xù)的高頻操作時凝果，讓事件監(jiān)聽器只執(zhí)行一次，其核心思想是當所綁定的事件被觸發(fā)時睦尽，會立即開啟一個setTimeout器净，只要還未到setTimeout所設定的毫秒值当凡，下一次所綁定事件的觸發(fā)就會clearTimeout上一次的setTimeout山害，并開啟一個新的setTimeout纠俭，以此類推，直到停手之后浪慌，到達setTimeout所設定的毫秒值冤荆，事件監(jiān)聽器才會執(zhí)行，其實眷射，函數(shù)防抖說白了就是當所綁定的事件被觸發(fā)時匙赞，等待n毫秒再執(zhí)行事件監(jiān)聽器，在等待時間內(nèi)當此事件再次被觸發(fā)時妖碉，就重置等待時間涌庭，使用場景是在使用<input>進行自動搜索時，當我們高頻輸入文字時欧宜，等到我們輸入完畢之后坐榆，等待n毫秒再調(diào)用后端接口，防止調(diào)用頻率過高而導致web瀏覽器出現(xiàn)延遲/假死/卡頓的現(xiàn)象冗茸，我們可以自己封裝一個防抖函數(shù)debounce席镀，其返回值是一個防抖回調(diào)函數(shù)，我們可讓此返回值充當oninput/onmousemove/onscroll/onresize等事件的回調(diào)函數(shù)夏漱，例如“function debounce (fn, delay) {let timerId = null; ?return function () {timerId && clearTimeout (timerId); ?timerId = setTimeout (() => {fn.apply (this, arguments);}, delay || 1000);}; }(//修改fn的arguments的意義是豪诲，在我們手動通過“DOM元素.事件名稱 ();”的形式去觸發(fā)某個事件時，當傳入了一些參數(shù)時挂绰，可以使函數(shù)作用域中的arguments保持一致屎篱，也可以使我們心目中真正的回調(diào)函數(shù)fn通過一個形參e就可以自動接收到事件對象，因為apply方法是通過數(shù)組/偽數(shù)組的方式進行傳參的)”葵蒂，函數(shù)節(jié)流可以在連續(xù)的高頻操作時交播，減少事件監(jiān)聽器的執(zhí)行次數(shù)，其核心思想是當所綁定的事件被觸發(fā)時践付，會立即開啟一個setTimeout秦士，在setTimeout所設定的毫秒值之內(nèi)，下一次所綁定事件的觸發(fā)既不會clearTimeout上一次的setTimeout永高，也不會開啟一個新的setTimeout隧土，直接就return，直到到達setTimeout所設定的毫秒值乏梁，事件監(jiān)聽器執(zhí)行完畢之后次洼，當再次觸發(fā)所綁定的事件時，才會clearTimeout上一次的setTimeout遇骑，并開啟一個新的setTimeout卖毁，以此類推，我們可以自己封裝一個節(jié)流函數(shù)throttle，其返回值是一個節(jié)流回調(diào)函數(shù)亥啦，我們可讓此返回值充當oninput/onmousemove/onscroll/onresize等事件的回調(diào)函數(shù)炭剪，例如“function throttle (fn, delay) {let timerId = null; ?let flag = true; ?return function () {if (!flag) return; ?flag = false; ?timerId && clearTimeout (timerId); ?timerId = setTimeout (() => {flag = true; ?fn.apply (this, arguments);}, delay || 1000);}; }”，定義在函數(shù)/塊級作用域中的函數(shù)就叫做閉包翔脱，正常來講奴拦，當一個定義在函數(shù)/塊級作用域中的變量沒有被訪問時，就會被系統(tǒng)釋放掉届吁，由于閉包能夠訪問到它错妖，所以閉包可以延長它的生命周期，當后續(xù)不需要此閉包時疚沐，一定要手動將它的值設置為null暂氯，否則會出現(xiàn)內(nèi)存泄漏，在for循環(huán)的小括號中使用let聲明符所定義的變量屬于父塊級作用域中的局部變量亮蛔，并且每次子塊級作用域中的循環(huán)體執(zhí)行完畢之后痴施，都會在一個全新的父塊級作用域中重新定義此變量，例如“{let i = 0; ?{循環(huán)體;} }”究流，由于每一個塊級作用域都是獨立的辣吃、互不干擾的，所以使用let聲明符可以實現(xiàn)for循環(huán)所遍歷到的索引值被各個按鈕所綁定事件的回調(diào)函數(shù)作用域同步訪問芬探，簡稱for循環(huán)索引同步神得，但是當我們將let換成var時，由于var聲明符不識別塊級作用域偷仿，所以變量i中所保存的索引值會被逐次覆蓋循头，雖然for循環(huán)遍歷索引值和各個按鈕的事件綁定可以同步執(zhí)行，但是所綁定事件的回調(diào)函數(shù)卻是異步執(zhí)行的炎疆，所以當所綁定事件的回調(diào)函數(shù)執(zhí)行時，在其函數(shù)作用域中所訪問到的變量i的值以最后一個為準国裳，只有形成閉包才能解決此問題形入，即將各個按鈕的事件綁定放入一個立即執(zhí)行的匿名函數(shù)作用域中，并將變量i的值傳入其中即可缝左，例如“l(fā)et oBtns = document.querySelectorAll (“button”); ?for (var i = 0; i < oBtns.length; i++) {(function (i) {oBtns[i].onclick = function () {alert (i + 1);} } ) (i);}”亿遂，排它三步曲是第一步先初始化一個變量previousIndex保存上一個按鈕的索引值（比如0），第二步使用for循環(huán)給各個按鈕綁定事件渺杉，只要其它按鈕觸發(fā)所綁定的事件就先排它（即清空上一個按鈕所對應的樣式）并給當前這個按鈕（this）設置所對應的樣式蛇数，第三步把當前這個按鈕的索引值i保存到變量previousIndex中就可以了，例如“l(fā)et oItems = document.querySelectorAll (“l(fā)i”); ?let previousIndex = 0; ?for (let i = 0; i < oItems.length; i++) {oItems[i].onclick = function () {oItems[previousIndex].className = “”; ?this.className = “current”; ?previousIndex = i;}”是越，正則表達式是用來表達對字符串的一種過濾邏輯的規(guī)則字符串（即邏輯公式）耳舅，但是必須new RegExp/使用字面量“/正則表達式/”來將此邏輯公式（正則表達式）包裝成一個正則表達式對象，格式為“l(fā)et reg = new RegExp (“正則表達式”, “修飾符1”, “修飾符2”, ...);”，“l(fā)et reg = new RegExp (/正則表達式/, “修飾符1”, “修飾符2”, ...);”浦徊，“l(fā)et reg = /正則表達式/修飾符1修飾符2...;”馏予，由于在字符串中反斜杠“\”具有功能性含義（比如“\t”代表制表符，“\n”代表換行盔性，“\xa0”代表空格）霞丧，所以當在new RegExp的參數(shù)1的正則表達式中出現(xiàn)了反斜杠“\”時，要在它前面再加一個反斜杠“\”冕香，這樣就將它轉(zhuǎn)義成了普通的反斜杠了蛹尝，這里邊所說的轉(zhuǎn)義是指使其失去功能，當想要new RegExp將正則表達式“\d{4}-\d{1, 2}-\d{1, 2}”包裝成一個正則表達式對象時悉尾，格式為“l(fā)et reg = new RegExp (“\\d{4}-\\d{1, 2}-\\d{1, 2}”);”突那，反斜杠“\”不光可以轉(zhuǎn)義字符串，也可以轉(zhuǎn)義正則表達式焕襟，比如中括號（范圍描述符）和“.”在正則表達式中都有功能性含義陨收，我們可以在它前面再加一個反斜杠“\”來使之變?yōu)槠胀ǖ闹欣ㄌ柡汀?”，“()”在正則表達式中代表將指定內(nèi)容提取出來鸵赖，例如“var timeReg = /\[(\d*:\d*\.\d*)\]/;(//詳見QQ音樂播放器-lyric.js)”务漩，“+”在正則表達式中是量詞，代表匹配一個/連續(xù)多個指定內(nèi)容的字符串它褪，例如“/y+/”饵骨，“^”代表匹配任何開頭為指定內(nèi)容的字符串，例如“/^n/”茫打，“$”代表匹配任何結(jié)尾為指定內(nèi)容的字符串居触，例如“/n$/”，“|”代表“或”的意思老赤，由于默認情況下正則表達式是區(qū)分大小寫的轮洋，所以使用i修飾符可以讓正則表達式不區(qū)分大小寫，由于默認情況下正則表達式一旦匹配到抬旺，就會停止匹配弊予，所以使用g修飾符可以讓正則表達式執(zhí)行全局匹配，正則表達式對象調(diào)用它的test方法可以檢測在傳入的字符串中是否包含跟此正則表達式相匹配的字符串开财，返回值是true/false汉柒，格式為“reg.test (“abc”);”，正則表達式對象調(diào)用它的exec方法可以返回在傳入的字符串中跟此正則表達式相匹配的字符串所組成的真數(shù)組责鳍，未匹配到就返回null

十三碾褂、JavaScript的小示例

關(guān)閉廣告效果的核心思想是只要onclick“關(guān)閉按鈕”，就removeChild廣告的那個DOM元素历葛，詳見“10-JavaScript-關(guān)閉廣告.html”正塌，圖片展示效果的核心思想是當onclick每一個小<img>元素時，就將此小<img>元素的src值賦值給大<img>元素的src屬性，詳見“11-JavaScript-圖片展示.html”传货，手動簡易輪播圖的核心思想是當onclick“下一張”/“上一張”按鈕時屎鳍，就將數(shù)組中“下一張”/“上一張”相應的<img>元素的src值賦值給<img>元素的src屬性，但是需要兩個if語句規(guī)定一下當點到頭了時怎么辦（即安全校驗）问裕，詳見“12-JavaScript-簡易輪播圖.html”逮壁，商品展示的核心思想是使用for of循環(huán)給每一個小<img>元素都綁定上onmouseenter和onmouseleave事件，當onmouseenter時粮宛，給嵌套小<img>元素的li元素增加border窥淆，并將小<img>元素的src值賦值給大<img>元素，當onmouseleave時巍杈，就移除border忧饭，詳見“15-JavaScript-商品展示.html”，Tab選項卡的核心思想是使用for of循環(huán)給每一個選項卡的按鈕都綁定上onclick事件筷畦，只要觸發(fā)此事件词裤，就清空上一次所對應元素的對應樣式，例如“oItems[previousIndex].className = “”; ?oDivs[previousIndex].style.display = “none”;”鳖宾，并設置當前所對應元素的對應樣式吼砂，例如“this.className = “current”; ?oDivs[i].style.display = “block”;”，并保存當前的索引值鼎文，例如“previousIndex = i;”渔肩，詳見“19-JavaScript-Tab選項卡下.html”，全選和反選的核心思想是只要onclick“全選”按鈕拇惋，就利用input多選框數(shù)組對象調(diào)用它的forEach方法周偎，將此數(shù)組中每一個元素的checked值改為true，取消全選是改為false撑帖，反選是“item.checked = !item.checked;”蓉坎，詳見“27-JavaScript-全選反選.html”，時鐘效果的核心思想是將時針`rotate(${date.getHours () * 30}deg)`胡嘿，分針和秒針都將乘以30改為乘以6袍嬉，詳見“31-JavaScript-時鐘效果.html”，緩動動畫（先快后慢）的步長的公式為“(結(jié)束位置 - 開始位置) * 緩動系數(shù)”灶平，緩動系數(shù)為一個0到1之間的小數(shù)，詳見animation2.js箍土，手動無限輪播圖要在所有img的最后再增加一張跟第一張一模一樣的img逢享，一旦點擊到最后一張img，當再點擊時吴藻，就要瞬間跳轉(zhuǎn)到第一張同時讓索引值自增1瞒爬，由于都是一模一樣的img，所以跳轉(zhuǎn)的過程肉眼根本看不出來，反向也是同樣的道理侧但，例如“oRight.onclick = function () {currentIndex++; ?if (currentIndex > oItems.length - 1) {currentIndex = 0; ?oUl.style.marginLeft = -currentIndex * imgWidth + “px”; ?currentIndex++;} ?easeAnimation (oUl, -currentIndex * imgWidth);}”矢空，詳見“36-JavaScript-無論播圖.html”，自動無限輪播圖可以通過手動無限輪播圖來改造禀横，增加一個setInterval屁药，在里面調(diào)用“右箭頭onclick事件”即可，只要onmouseenter就clearInterval此setInterval柏锄，onmouseleave就重新開啟一個setInterval酿箭，詳見“37-JavaScript-自動輪播.html”，佩奇跟我走的核心思想是使用了event.clientX和event.clientY趾娃，詳見“46-JavaScript-佩奇跟我走.html”缭嫡，星空背景的核心思想是使用for循環(huán)給所createElement的一定數(shù)量的小星星添加隨機位置、隨機scale抬闷、和隨機animationDelay妇蛀，小星星閃爍就做一個opacity從0到1的animation，詳見“59-JavaScript-星空背景.html”笤成，吸頂效果的核心思想是當window.onscroll時评架，只要豎向滾動條滾出的距離值大于等于頂部logo的高度，就將導航部分“oNav.style.position = “fixed”;”疹启，否則就“oNav.style.position = “”;”古程，詳見“65-JavaScript-吸頂效果.html”

十四、JavaScript的BOM特效

BOM（Browser Object Model）就是瀏覽器對象模型喊崖，是一套操作瀏覽器的API（接口/方法/屬性）挣磨，window對象中有navigator、location荤懂、history茁裙、screen等屬性，它們都是對象類型的屬性节仿，navigator對象代表此web瀏覽器的信息晤锥，navigator對象訪問它的userAgent屬性可以返回此web瀏覽器的類型信息字符串，例如“/chrome/i.test (navigator.userAgent);(//判斷是否是谷歌瀏覽器)”廊宪，“/msie/i.test (navigator.userAgent);(//判斷是否是低級IE瀏覽器)”矾瘾，““ActiveXObject”in window;(//判斷是否是高級IE瀏覽器)”，location對象代表此web瀏覽器地址欄的信息箭启，location對象訪問它的href屬性可以返回/設置此web瀏覽器地址欄當前完整的URL字符串壕翩，例如“l(fā)ocation.href = “http://www.baidu.com”;(//必須加http://，否則無效)”傅寡，“l(fā)ocation.href = “/exception/404”;(//這樣使用也是可以的放妈，此時相當于將web瀏覽器地址欄的URL的路徑部分強制置成/exception/404北救，其余部分不變)”，location對象訪問它的pathname屬性可以返回/設置此web瀏覽器地址欄當前URL的路徑部分的字符串芜抒，location對象訪問它的search屬性可以返回/設置此web瀏覽器地址欄當前URL的?及其之后部分的字符串珍策，location對象訪問它的hash屬性可以返回/設置此web瀏覽器地址欄當前URL尾部從#開始的字符串（即哈希），返回的值包含#宅倒，設置時不用寫#攘宙，系統(tǒng)會自動添加#，hash也叫哈希唉堪，給此web瀏覽器地址欄當前的URL設置一個哈希也叫種一個哈希模聋，可以代替cookie實現(xiàn)當前這個html文件上頁碼的記錄，即當前在哪一頁刷新之后還在哪一頁唠亚，cookie的弊端是只能在當前這個瀏覽器中使用链方，一旦換一個瀏覽器就失效了，這時改用哈希就可以了，詳見“index（13-weibo）.js”，location對象調(diào)用它的reload方法可以刷新此web瀏覽器的頁面水援，當傳入實參true時，代表強制刷新前酿，會更新緩存，history對象代表瀏覽器的歷史信息鹏溯，利用history對象可以實現(xiàn)刷新/上一步/下一步罢维，但是出于隱私考慮，并不能獲取到此web瀏覽器所有的歷史記錄丙挽，只能獲取到當前的歷史記錄肺孵，history對象調(diào)用它的forward方法可以在此web瀏覽器訪問過其它頁面時使頁面前進，history對象調(diào)用它的go方法可以在此web瀏覽器訪問過其它頁面時使頁面前進/后退颜阐，還可以刷新此web瀏覽器的頁面平窘，傳入正整數(shù)代表前進多少個頁面，傳入負整數(shù)代表后退多少個頁面凳怨，傳入0代表刷新瑰艘，history對象調(diào)用它的back方法可以在此web瀏覽器訪問過其它頁面時使頁面后退，screen對象代表用戶的屏幕信息