JavaScript前端開(kāi)發(fā)案例教程-第7章 DOM（下）_第1頁(yè)
JavaScript前端開(kāi)發(fā)案例教程-第7章 DOM（下）_第2頁(yè)
JavaScript前端開(kāi)發(fā)案例教程-第7章 DOM（下）_第3頁(yè)
JavaScript前端開(kāi)發(fā)案例教程-第7章 DOM（下）_第4頁(yè)
JavaScript前端開(kāi)發(fā)案例教程-第7章 DOM（下）_第5頁(yè)
已閱讀5頁(yè)，還剩98頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章DOM（下）《JavaScript前端開(kāi)發(fā)案例教程（第2版）》學(xué)習(xí)目標(biāo)/Target

熟悉節(jié)點(diǎn)的概念，能夠說(shuō)出節(jié)點(diǎn)的屬性和層級(jí)掌握節(jié)點(diǎn)操作，能夠完成節(jié)點(diǎn)的獲取、創(chuàng)建、添加、移除和復(fù)制操作掌握事件的進(jìn)階操作，能夠?qū)崿F(xiàn)事件的監(jiān)聽(tīng)和移除

熟悉DOM事件流，能夠說(shuō)出事件捕獲和事件冒泡兩種方式的區(qū)別學(xué)習(xí)目標(biāo)/Target

掌握元素其他操作，能夠?qū)υ氐奈恢?、大小、可視區(qū)域和滾動(dòng)進(jìn)行操作，

能夠獲取鼠標(biāo)指針位置

掌握常用事件，能夠通過(guò)常用事件完成常見(jiàn)的網(wǎng)頁(yè)交互效果

掌握事件對(duì)象，能夠利用事件對(duì)象進(jìn)行事件操作章節(jié)概述/Summary通過(guò)第6章的學(xué)習(xí)，大家應(yīng)該已經(jīng)掌握了DOM中元素的相關(guān)操作以及事件的基本使用，可以通過(guò)注冊(cè)事件以及元素操作的方式完成頁(yè)面的交互效果。接下來(lái)，本章將繼續(xù)講解DOM中的進(jìn)階內(nèi)容，如節(jié)點(diǎn)操作、事件監(jiān)聽(tīng)等。通過(guò)本章學(xué)習(xí)，大家可以實(shí)現(xiàn)更加復(fù)雜的頁(yè)面交互效果。目錄/Contents010203節(jié)點(diǎn)基礎(chǔ)節(jié)點(diǎn)操作事件進(jìn)階04事件對(duì)象目錄/Contents050607常用事件元素其他操作動(dòng)手實(shí)踐：鼠標(biāo)拖曳效果節(jié)點(diǎn)基礎(chǔ)7.1如何理解節(jié)點(diǎn)及其作用？節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有內(nèi)容在文檔樹(shù)中都是節(jié)點(diǎn)，即元素、屬性、文本等都屬于節(jié)點(diǎn)。作用：當(dāng)利用DOM進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，通過(guò)操作節(jié)點(diǎn)可以更加靈活地實(shí)現(xiàn)網(wǎng)頁(yè)中的交互效果。本節(jié)針對(duì)節(jié)點(diǎn)的屬性和層級(jí)進(jìn)行講解。7.1.1節(jié)點(diǎn)的屬性

先定一個(gè)小目標(biāo)！熟悉節(jié)點(diǎn)的屬性，能夠說(shuō)出節(jié)點(diǎn)的基本屬性7.1.1節(jié)點(diǎn)的屬性節(jié)點(diǎn)有3個(gè)常用屬性，具體如下。7.1.1節(jié)點(diǎn)的屬性nodeName：用于獲取節(jié)點(diǎn)名稱，全大寫(xiě)形式，如<div>標(biāo)簽的節(jié)點(diǎn)名稱為DIV。nodeValue：用于獲取節(jié)點(diǎn)值，一般適用于文本、注釋類型的節(jié)點(diǎn)。nodeType：用于獲取數(shù)字表示的節(jié)點(diǎn)類型，如1表示元素節(jié)點(diǎn)。常見(jiàn)的節(jié)點(diǎn)類型如下。類型常量常量的值元素節(jié)點(diǎn)

Node.ELEMENT_NODE1文本節(jié)點(diǎn)Node.TEXT_NODE3注釋節(jié)點(diǎn)Node.COMMENT_NODE8文檔節(jié)點(diǎn)Node.DOCUMENT_NODE9文檔類型節(jié)點(diǎn)Node.DOCUMENT_TYPE_NODE107.1.1節(jié)點(diǎn)的屬性在實(shí)際開(kāi)發(fā)中，開(kāi)發(fā)者可以根據(jù)節(jié)點(diǎn)的3個(gè)常用屬性獲取節(jié)點(diǎn)的名稱、值和類型，示例代碼如下。7.1.1節(jié)點(diǎn)的屬性varnode=document.body; //獲取body節(jié)點(diǎn)console.log(node.nodeName); //獲取節(jié)點(diǎn)名稱，輸出結(jié)果：BODYconsole.log(node.nodeValue); //獲取節(jié)點(diǎn)值，輸出結(jié)果：nullconsole.log(node.nodeType); //獲取節(jié)點(diǎn)類型，輸出結(jié)果：1有這樣一個(gè)問(wèn)題：節(jié)點(diǎn)操作時(shí)，頁(yè)面中有一個(gè)<div>標(biāo)簽，那么這個(gè)<div>標(biāo)簽在DOM中是元素還是節(jié)點(diǎn)呢？答案：既可以將它稱為div元素，也可以將它稱為div節(jié)點(diǎn)。7.1.1節(jié)點(diǎn)的屬性元素是節(jié)點(diǎn)的一種類型，即元素節(jié)點(diǎn)。從程序角度來(lái)說(shuō)，節(jié)點(diǎn)的構(gòu)造函數(shù)是Node，元素的構(gòu)造函數(shù)是Element，Element繼承Node。Tip

先定一個(gè)小目標(biāo)！熟悉節(jié)點(diǎn)的層級(jí)，能夠說(shuō)出節(jié)點(diǎn)的層級(jí)關(guān)系7.1.2節(jié)點(diǎn)的層級(jí)在家庭中，成員之間存在父子關(guān)系、兄弟關(guān)系。類似地，不同節(jié)點(diǎn)之間也存在這種關(guān)系。如何描述不同節(jié)點(diǎn)之間的關(guān)系呢？7.1.2節(jié)點(diǎn)的層級(jí)7.1.2節(jié)點(diǎn)的層級(jí)不同節(jié)點(diǎn)可以劃分為不同層級(jí)，比如根節(jié)點(diǎn)、父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)，節(jié)點(diǎn)層級(jí)示例代碼如下。<!DOCTYPEhtml><html><head><title>測(cè)試</title></head><body><ahref="#">鏈接</a><p>段落...</p></body></html>7.1.2節(jié)點(diǎn)的層級(jí)依據(jù)層級(jí)結(jié)構(gòu)對(duì)代碼中的節(jié)點(diǎn)進(jìn)行介紹。根節(jié)點(diǎn)：document節(jié)點(diǎn)是整個(gè)文檔的根節(jié)點(diǎn)，它的子節(jié)點(diǎn)包括文檔類型節(jié)點(diǎn)和html元素。父節(jié)點(diǎn)

：它是指某一節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)，例如，html元素是head元素和body元素的父節(jié)點(diǎn)，body元素是a元素和p元素的父節(jié)點(diǎn)。子節(jié)點(diǎn)：它是指某一節(jié)點(diǎn)的下級(jí)節(jié)點(diǎn)，例如：head元素和body元素是html元素的子節(jié)點(diǎn)，a元素和p元素是body元素的子節(jié)點(diǎn)。兄弟節(jié)點(diǎn)：它是指同屬于一個(gè)父節(jié)點(diǎn)的兩個(gè)子節(jié)點(diǎn)，例如：head元素和body元素互為兄弟節(jié)點(diǎn)，a元素和p元素互為兄弟節(jié)點(diǎn)。節(jié)點(diǎn)操作7.2

先定一個(gè)小目標(biāo)！掌握獲取父節(jié)點(diǎn)，能夠完成父節(jié)點(diǎn)的獲取7.2.1獲取節(jié)點(diǎn)7.2.1獲取節(jié)點(diǎn)獲取父節(jié)點(diǎn)：在JavaScript中，可以使用parentNode屬性獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)，如果該節(jié)點(diǎn)沒(méi)有父節(jié)點(diǎn)，那么parentNode屬性返回null。獲取父節(jié)點(diǎn)的示例代碼如下。node.parentNodeDOM節(jié)點(diǎn)對(duì)象

先定一個(gè)小目標(biāo)！掌握獲取子節(jié)點(diǎn)，能夠完成子節(jié)點(diǎn)的獲取7.2.1獲取節(jié)點(diǎn)7.2.1獲取節(jié)點(diǎn)屬性說(shuō)明firstChild獲取當(dāng)前節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)lastChild獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)firstElementChild獲取當(dāng)前節(jié)點(diǎn)的首個(gè)子元素節(jié)點(diǎn)lastElementChild獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子元素節(jié)點(diǎn)children獲取當(dāng)前節(jié)點(diǎn)的所有子元素節(jié)點(diǎn)集合childNodes獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)集合獲取子節(jié)點(diǎn)：在DOM中，用來(lái)獲取子節(jié)點(diǎn)的屬性有很多，可以結(jié)合子節(jié)點(diǎn)的特征進(jìn)行獲取。7.2.1獲取節(jié)點(diǎn)childNodes屬性瀏覽器兼容性IE6~IE8中childNodes屬性不會(huì)獲取文本節(jié)點(diǎn)。在IE9及以上版本和主流瀏覽器中則可以獲取文本節(jié)點(diǎn)。

先定一個(gè)小目標(biāo)！掌握獲取兄弟節(jié)點(diǎn)，能夠完成兄弟節(jié)點(diǎn)的獲取7.2.1獲取節(jié)點(diǎn)7.2.1獲取節(jié)點(diǎn)獲取兄弟節(jié)點(diǎn)：可以使用previousSibling屬性和nextSibling屬性獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)和下一個(gè)兄弟節(jié)點(diǎn)，進(jìn)而獲取到元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等內(nèi)容。若沒(méi)有兄弟節(jié)點(diǎn)，就返回null。獲取兄弟元素節(jié)點(diǎn)：可以使用nextElementSibling屬性返回當(dāng)前元素的下一個(gè)兄弟元素節(jié)點(diǎn)，使用previousElementSibling屬性返回當(dāng)前元素的上一個(gè)兄弟元素節(jié)點(diǎn)。如果沒(méi)有兄弟元素節(jié)點(diǎn)，則返回null。nextElementSibling屬性和previousElementSibling屬性存在有兼容性問(wèn)題，IE9以下不支持。注意7.2.1獲取節(jié)點(diǎn)使用封裝函數(shù)的方式解決nextElementSibling屬性和previousElementSibling屬性的瀏覽器兼容問(wèn)題，示例代碼如下。functiongetNextElementSibling(element){varel=element;while(el=el.nextSibling){if(el.nodeType===Node.ELEMENT_NODE){returnel;}

}returnnull;}vardiv=document.querySelector('div');console.log(getNextElementSibling(div));多學(xué)一招：兼容獲取兄弟元素節(jié)點(diǎn)的屬性

先定一個(gè)小目標(biāo)！掌握創(chuàng)建并添加節(jié)點(diǎn)，能夠完成節(jié)點(diǎn)的創(chuàng)建與添加7.2.2創(chuàng)建并添加節(jié)點(diǎn)在開(kāi)發(fā)過(guò)程中，有時(shí)需要?jiǎng)?chuàng)建一個(gè)新節(jié)點(diǎn)并添加到文檔中。例如，在“百度”搜索引擎中進(jìn)行搜索后，搜索框下方的搜索記錄列表中會(huì)增加一個(gè)新歷史記錄，這個(gè)新歷史記錄就可以通過(guò)創(chuàng)建并添加節(jié)點(diǎn)實(shí)現(xiàn)。7.2.2創(chuàng)建并添加節(jié)點(diǎn)7.2.2創(chuàng)建并添加節(jié)點(diǎn)創(chuàng)建節(jié)點(diǎn)：使用document對(duì)象的createElement()方法可以創(chuàng)建元素節(jié)點(diǎn)，語(yǔ)法如下。創(chuàng)建節(jié)點(diǎn)的示例代碼如下。使用createElement()方法創(chuàng)建的節(jié)點(diǎn)是頁(yè)面中原本不存在的，所以這種方式也稱為動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn)。Tipvardiv=document.createElement('div');console.log(div);//結(jié)果為：<div></div>document.createElement('標(biāo)簽名');7.2.2創(chuàng)建并添加節(jié)點(diǎn)添加節(jié)點(diǎn)：節(jié)點(diǎn)創(chuàng)建后，我們需要根據(jù)實(shí)際的開(kāi)發(fā)需求將節(jié)點(diǎn)添加到文檔中的指定位置。添加節(jié)點(diǎn)的方法：DOM中提供了appendChild()方法和insertBefore()方法用于添加節(jié)點(diǎn)，這兩個(gè)方法都由父節(jié)點(diǎn)的對(duì)象調(diào)用。appendChild()方法表示將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的所有子節(jié)點(diǎn)的末尾。insertBefore()方法表示將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)中的指定子節(jié)點(diǎn)的前面，該方法需要接收兩個(gè)參數(shù)，第1個(gè)參數(shù)表示要添加的節(jié)點(diǎn)，第2個(gè)參數(shù)表示父節(jié)點(diǎn)中的指定子節(jié)點(diǎn)。

先定一個(gè)小目標(biāo)！掌握移除節(jié)點(diǎn)，能夠完成節(jié)點(diǎn)的移除操作7.2.3移除節(jié)點(diǎn)移除節(jié)點(diǎn)：在DOM中，可以通過(guò)removeChild()方法將一個(gè)父節(jié)點(diǎn)的指定子節(jié)點(diǎn)移除，語(yǔ)法格式如下。node.removeChild(child)父節(jié)點(diǎn)7.2.3移除節(jié)點(diǎn)移除指定的子節(jié)點(diǎn)child

先定一個(gè)小目標(biāo)！掌握簡(jiǎn)易留言板案例的開(kāi)發(fā)，能夠?qū)崿F(xiàn)發(fā)表留言和展示留言的功能7.2.4【案例】簡(jiǎn)易留言板案例實(shí)現(xiàn)步驟搭建頁(yè)面結(jié)構(gòu)。實(shí)現(xiàn)單擊“發(fā)布”按鈕發(fā)表留言的功能。實(shí)現(xiàn)刪除留言功能。7.2.4【案例】簡(jiǎn)易留言板左圖為單擊“發(fā)布”按鈕添加留言效果，右圖為單擊第一條留言中“刪除”按鈕后的效果。7.2.4【案例】簡(jiǎn)易留言板

先定一個(gè)小目標(biāo)！掌握復(fù)制節(jié)點(diǎn)，能夠完成節(jié)點(diǎn)的復(fù)制7.2.5復(fù)制節(jié)點(diǎn)7.2.5復(fù)制節(jié)點(diǎn)復(fù)制節(jié)點(diǎn)：在DOM中，可以通過(guò)cloneNode()方法復(fù)制節(jié)點(diǎn)。通過(guò)一個(gè)節(jié)點(diǎn)對(duì)象調(diào)用cloneNode()方法后，該方法會(huì)返回節(jié)點(diǎn)對(duì)象的副本。該方法的第1個(gè)參數(shù)是可選參數(shù)，具體說(shuō)明如下。默認(rèn)為false，表示只復(fù)制節(jié)點(diǎn)本身，不復(fù)制節(jié)點(diǎn)內(nèi)部的子節(jié)點(diǎn)。如果設(shè)為true，表示復(fù)制節(jié)點(diǎn)本身及里面所有的子節(jié)點(diǎn)。事件進(jìn)階7.3

先定一個(gè)小目標(biāo)！掌握事件監(jiān)聽(tīng)，能夠完成事件的監(jiān)聽(tīng)7.3.1事件監(jiān)聽(tīng)我們知道，事件需要先注冊(cè)，然后才能使用。除了通過(guò)將對(duì)象的事件屬性賦值一個(gè)事件處理函數(shù)來(lái)完成事件的注冊(cè)外，還有什么其他方法可以完成事件注冊(cè)？7.3.1事件監(jiān)聽(tīng)事件的注冊(cè)還可以通過(guò)事件監(jiān)聽(tīng)的方式實(shí)現(xiàn)。通過(guò)事件監(jiān)聽(tīng)可以給一個(gè)事件類型注冊(cè)多個(gè)事件處理函數(shù)，但這種方式存在瀏覽器兼容問(wèn)題，我們需要根據(jù)不同的瀏覽器編寫(xiě)相應(yīng)的代碼進(jìn)行處理。7.3.1事件監(jiān)聽(tīng)瀏覽器分為以下兩大類。循環(huán)結(jié)構(gòu)語(yǔ)句早期版本IE瀏覽器新版瀏覽器循環(huán)語(yǔ)句瀏覽器分類在早期版本IE瀏覽器中，事件監(jiān)聽(tīng)的語(yǔ)法格式如下。7.3.1事件監(jiān)聽(tīng)對(duì)象.attachEvent(type,callback);事件類型事件處理函數(shù)在新版瀏覽器中，事件監(jiān)聽(tīng)的語(yǔ)法格式如下。7.3.1事件監(jiān)聽(tīng)對(duì)象.addEventListener(type,callback,[capture]);事件類型事件處理函數(shù)false（默認(rèn)值）表示在冒泡階段完成事件處理true表示在捕獲階段完成事件處理

先定一個(gè)小目標(biāo)！掌握事件移除，能夠完成事件的移除7.3.2事件移除7.3.2事件移除事件移除：不同方式注冊(cè)的事件移除方式不同，并且需要考慮兼容性問(wèn)題。對(duì)象.onclick=null;設(shè)置為null，即可移除事件移除傳統(tǒng)方式注冊(cè)的事件，語(yǔ)法格式如下。7.3.2事件移除移除事件監(jiān)聽(tīng)方式注冊(cè)的事件，語(yǔ)法格式如下。對(duì)象.onclick=null;對(duì)象.detachEvent(type,callback); //早期版本IE瀏覽器對(duì)象.removeEventListener(type,callback); //新版瀏覽器type表示要移除的事件類型（與添加事件監(jiān)聽(tīng)時(shí)一致），callback表示事件處理函數(shù)，且該callback必須與注冊(cè)時(shí)的事件處理函數(shù)是同一個(gè)函數(shù)。

先定一個(gè)小目標(biāo)！熟悉DOM事件流，能夠說(shuō)出事件捕獲和事件冒泡兩種方式的區(qū)別7.3.3DOM事件流假如頁(yè)面中有一個(gè)父div元素嵌套子div元素的結(jié)構(gòu)，并且父div元素和子div元素都有單擊事件，當(dāng)用戶單擊子div元素后，會(huì)先觸發(fā)子div元素的事件，后觸發(fā)父div元素的事件。這是為什么呢？7.3.3DOM事件流事件流分為事件捕獲和事件冒泡兩種。事件捕獲：由網(wǎng)景公司的團(tuán)隊(duì)提出，指的是事件流傳播的順序應(yīng)該是從DOM樹(shù)的根節(jié)點(diǎn)開(kāi)始出發(fā)一直到發(fā)生事件的節(jié)點(diǎn)。事件冒泡：由微軟公司的團(tuán)隊(duì)提出，指的是事件流傳播的順序應(yīng)該是從發(fā)生事件的節(jié)點(diǎn)到DOM樹(shù)的根節(jié)點(diǎn)。我們想要知道原因，首先需要明白事件流的執(zhí)行過(guò)程。當(dāng)事件發(fā)生時(shí)，事件會(huì)在發(fā)生事件的目標(biāo)節(jié)點(diǎn)與DOM樹(shù)根節(jié)點(diǎn)之間按照特定的順序進(jìn)行傳播，這個(gè)事件傳播的過(guò)程就是事件流。7.3.3DOM事件流W3C對(duì)網(wǎng)景公司和微軟公司提出的方案進(jìn)行了中和處理，將DOM事件流分為3個(gè)階段，具體如下。事件捕獲階段：事件從document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的階段。事件目標(biāo)階段：事件流到達(dá)目標(biāo)節(jié)點(diǎn)后，執(zhí)行相應(yīng)的事件處理函數(shù)的階段。事件冒泡階段：事件從目標(biāo)節(jié)點(diǎn)自上而下向document節(jié)點(diǎn)傳播的階段。7.3.3DOM事件流當(dāng)事件發(fā)生后，瀏覽器首先進(jìn)行事件捕獲，但不會(huì)對(duì)事件進(jìn)行處理；然后進(jìn)入目標(biāo)階段，執(zhí)行目標(biāo)節(jié)點(diǎn)的事件處理程序；最后實(shí)現(xiàn)事件的冒泡，逐級(jí)對(duì)事件進(jìn)行處理。7.3.3DOM事件流下面以一個(gè)包含div元素的頁(yè)面為例，演示事件流的具體過(guò)程。當(dāng)div元素上注冊(cè)的事件被觸發(fā)后，首先會(huì)進(jìn)入事件捕獲階段，按照從document節(jié)點(diǎn)到div元素的順序逐層傳播。然后進(jìn)入事件目標(biāo)階段，執(zhí)行事件目標(biāo)階段的事件處理函數(shù)。最后進(jìn)入事件冒泡階段，按照從div元素到document節(jié)點(diǎn)的順序逐層處理注冊(cè)的事件。事件流的具體過(guò)程7.3.3DOM事件流在JavaScript中，事件處理函數(shù)的執(zhí)行順序默認(rèn)情況下事件處理函數(shù)是按照冒泡階段的順序執(zhí)行的，也就是說(shuō)，先執(zhí)行目標(biāo)節(jié)點(diǎn)的事件處理函數(shù)，再向上“冒泡”，執(zhí)行父節(jié)點(diǎn)的事件處理函數(shù)。若要實(shí)現(xiàn)事件捕獲，則需要將addEventListener()方法的第3個(gè)參數(shù)設(shè)置為true，表示在捕獲階段完成事件處理。JavaScript中的事件類型有很多，但不是所有的事件類型都能冒泡，如blur事件、focus事件、mouseenter事件、mouseleave事件。注意事件對(duì)象7.4當(dāng)一個(gè)事件被觸發(fā)后，與該事件相關(guān)的一系列信息和數(shù)據(jù)的集合會(huì)被放入一個(gè)對(duì)象，這個(gè)對(duì)象稱為事件對(duì)象。事件存在時(shí)，事件對(duì)象才會(huì)存在，它是JavaScript自動(dòng)創(chuàng)建的。例如，鼠標(biāo)單擊的事件對(duì)象中，包含鼠標(biāo)指針的坐標(biāo)等相關(guān)信息；鍵盤(pán)按鍵的事件對(duì)象中，包含被按按鍵的鍵值等相關(guān)信息。7.4.1事件對(duì)象的使用

先定一個(gè)小目標(biāo)！掌握事件對(duì)象的使用，能夠利用事件對(duì)象進(jìn)行事件操作7.4.1事件對(duì)象的使用在新版瀏覽器中，通過(guò)事件處理函數(shù)的參數(shù)即可獲得事件對(duì)象；在早期版本的IE瀏覽器中，只能通過(guò)window對(duì)象獲取事件對(duì)象。7.4.1事件對(duì)象的使用獲取事件對(duì)象的示例代碼如下。對(duì)象.事件屬性=function(event){}; //新版瀏覽器var事件對(duì)象=window.event; //早期版本IE瀏覽器

先定一個(gè)小目標(biāo)！掌握事件對(duì)象的常用屬性和方法，能夠根據(jù)不同場(chǎng)景選擇合適的方法操作事件對(duì)象7.4.2事件對(duì)象的常用屬性和方法在事件發(fā)生后，通過(guò)事件對(duì)象的屬性和方法可以獲取觸發(fā)事件的對(duì)象和事件類型等信息。7.4.2事件對(duì)象的常用屬性和方法屬性說(shuō)明兼容瀏覽器e.target

獲取觸發(fā)事件的對(duì)象新版瀏覽器e.srcElement獲取觸發(fā)事件的對(duì)象早期版本IE瀏覽器e.type獲取事件的類型所有瀏覽器e.stopPropagation()阻止事件冒泡新版瀏覽器e.cancelBubble阻止事件冒泡早期版本IE瀏覽器e.preventDefault()阻止默認(rèn)事件（默認(rèn)行為）新版瀏覽器e.returnValue阻止默認(rèn)事件（默認(rèn)行為）早期版本IE瀏覽器在前面的內(nèi)容中，我們?cè)谑录幚砗瘮?shù)的內(nèi)部使用this獲取當(dāng)前觸發(fā)事件的對(duì)象。除了這種方式，還可以用e.target

獲取（早期版本E瀏覽器需要用e.srcElement)。通常情況下，這兩種方式返回的對(duì)象是同一個(gè)對(duì)象。7.4.2事件對(duì)象的常用屬性和方法代碼演示：為一個(gè)內(nèi)容為“單擊”的div元素注冊(cè)單擊事件，示例代碼如下。div.onclick=function(e){vare=e||window.event;vartarget=e.target||e.srcElement;console.log(target); //結(jié)果為：<div>單擊</div>console.log(this); //結(jié)果為：<div>單擊</div>};7.4.2事件對(duì)象的常用屬性和方法在事件處理函數(shù)中，阻止默認(rèn)行為可以通過(guò)returnfalse來(lái)實(shí)現(xiàn)，除此之外，還可以通過(guò)事件對(duì)象的preventDefault()方法實(shí)現(xiàn)。只有事件對(duì)象的cancelable屬性設(shè)置為true，才可以使用preventDefault()方法取消其默認(rèn)行為。早期版本IE瀏覽器不支持preventDefault()方法，需要通過(guò)將e.returnValue設(shè)置為false來(lái)實(shí)現(xiàn)阻止默認(rèn)行為。注意在HTML中，有些元素自身?yè)碛幸恍┠J(rèn)行為。但是在實(shí)際開(kāi)發(fā)中，有時(shí)需要阻止元素的默認(rèn)行為，例如，在表單驗(yàn)證時(shí)發(fā)現(xiàn)表單填寫(xiě)有誤，需要阻止表單提交。7.4.2事件對(duì)象的常用屬性和方法下面以阻止<a>標(biāo)簽的默認(rèn)行為為例進(jìn)行演示，示例代碼如下。vara=document.querySelector('a');a.onclick=function(e){vare=e||window.event;

e.preventDefault(); //在新版瀏覽器中阻止默認(rèn)行為

e.returnValue=false; //在早期版本IE瀏覽器中阻止默認(rèn)行為};對(duì)于一個(gè)注冊(cè)了事件的節(jié)點(diǎn)來(lái)說(shuō)，有時(shí)我們希望只有該元素觸發(fā)事件，但因?yàn)槭录芭莸拇嬖冢撛氐淖釉赜|發(fā)事件時(shí)會(huì)使該節(jié)點(diǎn)的事件被觸發(fā)，并且該元素的父元素的事件也會(huì)被觸發(fā)，這種現(xiàn)象與預(yù)期效果不一致，所以需要阻止事件冒泡。7.4.2事件對(duì)象的常用屬性和方法7.4.2事件對(duì)象的常用屬性和方法事件對(duì)象的stopPropagation()方法可以阻止事件冒泡行為。對(duì)于早期版本IE瀏覽器，應(yīng)使用cancelBubble屬性。代碼演示：阻止事件冒泡，并解決瀏覽器兼容問(wèn)題，示例代碼如下。if(window.event){window.event.cancelBubble=true; //早期版本IE瀏覽器}else{e.stopPropagation(); //新版瀏覽器（e是事件對(duì)象）}事件委托就是將子節(jié)點(diǎn)對(duì)應(yīng)的事件注冊(cè)給父節(jié)點(diǎn)，然后利用事件冒泡的原理影響到每個(gè)子節(jié)點(diǎn)。當(dāng)子節(jié)點(diǎn)觸發(fā)事件時(shí)，會(huì)執(zhí)行注冊(cè)在父節(jié)點(diǎn)上的事件。7.4.2事件對(duì)象的常用屬性和方法事件委托優(yōu)點(diǎn)：不需要為每個(gè)子節(jié)點(diǎn)注冊(cè)事件，而是只給父節(jié)點(diǎn)注冊(cè)事件，當(dāng)父節(jié)點(diǎn)動(dòng)態(tài)添加子節(jié)點(diǎn)時(shí)，新添加的子節(jié)點(diǎn)也可以觸發(fā)事件。事件委托適用場(chǎng)景：當(dāng)多個(gè)子節(jié)點(diǎn)上的事件類型以及事件處理函數(shù)相同時(shí)，才適合使用事件委托。7.4.2事件對(duì)象的常用屬性和方法7.4.2事件對(duì)象的常用屬性和方法document.addEventListener('contextmenu',function(e){e.preventDefault(); //禁用右鍵菜單});document.addEventListener('selectstart',function(e){e.preventDefault(); //禁用文本選中});在DOM中，打開(kāi)右鍵菜單時(shí)會(huì)觸發(fā)contextmenu事件，開(kāi)始選擇文本時(shí)會(huì)觸發(fā)selectstart事件。若要禁用右鍵菜單和文本選中，可以通過(guò)如下代碼來(lái)實(shí)現(xiàn)。多學(xué)一招：禁用右鍵菜單和文本選中常用事件7.5

先定一個(gè)小目標(biāo)！掌握焦點(diǎn)事件，能夠?yàn)樵刈?cè)焦點(diǎn)事件7.5.1焦點(diǎn)事件焦點(diǎn)事件包括獲得焦點(diǎn)事件和失去焦點(diǎn)事件，常用于表單驗(yàn)證。7.5.1焦點(diǎn)事件事件名稱事件觸發(fā)時(shí)機(jī)focus

當(dāng)獲得焦點(diǎn)時(shí)觸發(fā)（不會(huì)冒泡）blur當(dāng)失去焦點(diǎn)時(shí)觸發(fā)（不會(huì)冒泡）案例：檢測(cè)文本框是否失去焦點(diǎn)，如果失去焦點(diǎn)說(shuō)明用戶填寫(xiě)過(guò)文本框，需要驗(yàn)證用戶填寫(xiě)的內(nèi)容是否正確。左圖為初始頁(yè)面效果圖，右圖為密碼框?yàn)榭涨沂ソ裹c(diǎn)時(shí)的效果圖。7.5.1焦點(diǎn)事件

先定一個(gè)小目標(biāo)！掌握文本框內(nèi)容的顯示和隱藏案例的開(kāi)發(fā)，能夠?qū)崿F(xiàn)內(nèi)容的顯示和隱藏效果7.5.2【案例】文本框內(nèi)容的顯示和隱藏本案例需要實(shí)現(xiàn)為一個(gè)文本框添加提示文本，當(dāng)單擊文本框時(shí)，里面的默認(rèn)提示文字會(huì)隱藏，當(dāng)鼠標(biāo)指針離開(kāi)文本框時(shí)，里面的文字會(huì)顯示出來(lái)。7.5.2【案例】文本框內(nèi)容的顯示和隱藏【案例】文本框內(nèi)容的顯示和隱藏具體實(shí)現(xiàn)思路如下。為元素注冊(cè)獲取文本框焦點(diǎn)事件focus和失去焦點(diǎn)事件blur。獲取焦點(diǎn)時(shí)，判斷文本框里面的內(nèi)容是否為默認(rèn)文字“手機(jī)”，如果是默認(rèn)文字，就清空表單內(nèi)容。失去焦點(diǎn)時(shí)，判斷文本框里面的內(nèi)容是否為空，如果為空，則表單里面的內(nèi)容改為默認(rèn)文字“手機(jī)”。7.5.2【案例】文本框內(nèi)容的顯示和隱藏左圖為文本框內(nèi)容顯示的效果，右圖為文本框內(nèi)容隱藏效果。

先定一個(gè)小目標(biāo)！掌握鼠標(biāo)事件，能夠根據(jù)不同場(chǎng)景使用合適的鼠標(biāo)事件7.5.3鼠標(biāo)事件7.5.3鼠標(biāo)事件鼠標(biāo)事件是鼠標(biāo)在頁(yè)面中進(jìn)行的一些操作所觸發(fā)的事件，例如，鼠標(biāo)單擊、鼠標(biāo)雙擊、鼠標(biāo)指針進(jìn)入、鼠標(biāo)指針離開(kāi)等事件。事件名稱事件觸發(fā)時(shí)機(jī)click當(dāng)鼠標(biāo)單擊時(shí)觸發(fā)dblclick當(dāng)鼠標(biāo)雙擊時(shí)觸發(fā)mouseover當(dāng)鼠標(biāo)指針移入時(shí)觸發(fā)（當(dāng)前元素和其子元素都觸發(fā)）mouseout當(dāng)鼠標(biāo)指針移出時(shí)觸發(fā)（當(dāng)前元素和其子元素都觸發(fā)）mouseenter當(dāng)鼠標(biāo)指針移入時(shí)觸發(fā)（子元素不觸發(fā)）mouseleave當(dāng)鼠標(biāo)指針移出時(shí)觸發(fā)（子元素不觸發(fā)）mousedown當(dāng)按下任意鼠標(biāo)按鍵時(shí)觸發(fā)mouseup當(dāng)釋放任意鼠標(biāo)按鍵時(shí)觸發(fā)mousemove在元素內(nèi)當(dāng)鼠標(biāo)指針移動(dòng)時(shí)持續(xù)觸發(fā)7.5.4【案例】下拉菜單下拉菜單是網(wǎng)頁(yè)中的常見(jiàn)結(jié)構(gòu)之一，當(dāng)鼠標(biāo)指針移入下拉菜單中的某一項(xiàng)時(shí)，顯示該項(xiàng)的子菜單；當(dāng)鼠標(biāo)指針移出所在項(xiàng)時(shí)，隱藏子菜單。

先定一個(gè)小目標(biāo)！掌握下拉菜單案例的開(kāi)發(fā)，能夠?qū)崿F(xiàn)鼠標(biāo)指針移入、移出時(shí)的顯示和隱藏效果7.5.4【案例】下拉菜單7.5.4【案例】下拉菜單下拉菜單案例的具體實(shí)現(xiàn)步驟如下。編寫(xiě)頁(yè)面布局：編寫(xiě)HTML代碼搭建頁(yè)面的整體布局。實(shí)現(xiàn)鼠標(biāo)指針移入、移出的效果：首先獲取元素節(jié)點(diǎn)，然后為獲取的每個(gè)元素節(jié)點(diǎn)注冊(cè)鼠標(biāo)移入和移出事件，最后在事件處理函數(shù)中，設(shè)置子菜單的顯示和隱藏。

先定一個(gè)小目標(biāo)！掌握鍵盤(pán)事件，能夠根據(jù)不同場(chǎng)景使用合適的鍵盤(pán)事件7.5.5鍵盤(pán)事件7.5.5鍵盤(pán)事件鍵盤(pán)事件是指用戶按鍵盤(pán)上的按鍵時(shí)觸發(fā)的事件。例如，用戶按“Esc”鍵退出全屏，按

“Enter”鍵換行等。事件名稱事件觸發(fā)時(shí)機(jī)keypress按鍵盤(pán)按鍵（Shift、Fn、CapsLock等非字符鍵除外）時(shí)觸發(fā)keydown按鍵盤(pán)按鍵時(shí)觸發(fā)keyup鍵盤(pán)按鍵彈起時(shí)觸發(fā)7.5.5鍵盤(pán)事件keypress事件獲得的鍵碼是ASCII碼，keydown和keyup事件獲得的鍵碼是虛擬鍵碼。常用的虛擬鍵碼如下。虛擬鍵碼48~57代表橫排數(shù)字鍵0~9。虛擬鍵碼65~90代表A~Z鍵。虛擬鍵碼13代表“Enter”鍵。虛擬鍵碼27代表“Esc”鍵。虛擬鍵碼32代表“Space”鍵。虛擬鍵碼37~40代表方向鍵左（←）、上（↑）、右（→）、下（↓）。

先定一個(gè)小目標(biāo)！掌握表單事件，能夠根據(jù)不同場(chǎng)景使用合適的表單事件7.5.6表單事件表單事件是指對(duì)表單操作時(shí)發(fā)生的事件。例如，單擊表單提交按鈕時(shí)，會(huì)觸發(fā)表單提交事件，單擊表單重置按鈕時(shí)，會(huì)觸發(fā)表單重置事件。事件名稱事件觸發(fā)時(shí)機(jī)submit當(dāng)表單提交時(shí)觸發(fā)，用于<form>標(biāo)簽reset當(dāng)表單重置時(shí)觸發(fā)，用于<form>標(biāo)簽change當(dāng)內(nèi)容發(fā)生改變時(shí)觸發(fā)，一般用于<input>、<select>、<textarea>標(biāo)簽7.5.6表單事件元素其他操作7.6

先定一個(gè)小目標(biāo)！掌握如何獲取元素的位置和大小，能夠通過(guò)offset系列屬性進(jìn)行獲取7.6.1獲取元素的位置和大小7.6.1獲取元素的位置和大小通過(guò)元素的offset系列屬性可以獲取元素的位置、大小等，offset的含義是偏移量。屬性說(shuō)明offsetParent向上層查找最近的設(shè)置定位的父元素，或最近的table、td、th、body元素，返回找到的元素offsetLeft獲取元素相對(duì)其offsetParent元素左邊界的偏移量offsetTop獲取元素相對(duì)其offsetParent元素上邊界的偏移量offsetWidth獲取元素（包括padding、border和內(nèi)容區(qū)域）寬度offsetHeight獲取元素（包括padding、border和內(nèi)容區(qū)域）高度7.6.1獲取元素的位置和大小使用offset系列屬性時(shí)的注意事項(xiàng)如下。offset系列屬性都是只讀的，獲取結(jié)果為數(shù)字型像素值。定位是指元素的樣式中設(shè)置了position定位。offsetParent在查找父元素時(shí)，如果父元素沒(méi)有設(shè)置定位，則繼續(xù)向上層查找祖先元素。在Chrome瀏覽器中，如果一個(gè)元素被隱藏（display為none），或其祖先元素被隱藏，或元素的position被設(shè)為fixed，則offsetParent屬性返回null。

先定一個(gè)小目標(biāo)！掌握如何獲取元素的可視區(qū)域，能夠通過(guò)client系列屬性進(jìn)行獲取7.6.2獲取元素的可視區(qū)域通過(guò)client系列屬性可以獲取元素的可視區(qū)域。屬性說(shuō)明clientLeft獲取元素左邊框的大小clientTop獲取元素上邊框的大小clientWidth獲取元素的寬度，包括padding，不包括border、margin和垂直滾動(dòng)條clientHeight獲取元素的高度，包括padding，不包括border、margin和水平滾動(dòng)條7.6.2獲取元素的可視區(qū)域使用client系列屬性時(shí)的注意事項(xiàng)如下。client系列屬性都是只讀的，獲取結(jié)果為數(shù)字型像素值。當(dāng)內(nèi)容區(qū)域超出容器大小時(shí)，clientWidth和clientHeight屬性仍然按照CSS中設(shè)置的寬度、高度和padding來(lái)計(jì)算。7.6.2獲取元素的可視區(qū)域

先定一個(gè)小目標(biāo)！掌握元素的滾動(dòng)操作，能夠通過(guò)scroll系列屬性實(shí)現(xiàn)元素滾動(dòng)7.6.3元素的滾動(dòng)操作通過(guò)scroll系列屬性可以實(shí)現(xiàn)元素的滾動(dòng)操作。屬性說(shuō)明scrollLeft獲取或設(shè)置元素被“卷去”的左側(cè)距離scrollTop獲取或設(shè)置元素被“卷去”的上方距離scrollWidth獲取元素內(nèi)容的完整寬度，不含邊框scrollHeight獲取元素內(nèi)容的完整高度，不含邊框7.6.3元素的滾動(dòng)操作使用scroll系列屬性時(shí)的注意事項(xiàng)如下。scroll

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論