一渤早、事件
1、什么是事件
事件(Event)是 JavaScript 應(yīng)用跳動的心臟 洲胖,進(jìn)行交互济榨,使網(wǎng)頁動起來。當(dāng)我們與瀏覽器 中 Web 頁面進(jìn)行某些類型的交互時绿映,事件就發(fā)生了擒滑。事件可能是用戶在某些內(nèi)容上的點(diǎn)擊、 鼠標(biāo)經(jīng)過某個特定元素或按下鍵盤上的某些按鍵绘梦。事件還可能是 Web 瀏覽器中發(fā)生的事情橘忱, 比如說某個 Web 頁面加載完成,或者是用戶滾動窗口或改變窗口大小卸奉。
通過使用 JavaScript 钝诚,你可以監(jiān)聽特定事件的發(fā)生,并規(guī)定讓某些事件發(fā)生以對這些事件 做出響應(yīng)
2榄棵、特點(diǎn)
三要素:
事件源凝颇、事件名稱、處理函數(shù)
注意:
一個事件可以觸發(fā)多個函數(shù)
一個函數(shù)可以被多個事件觸發(fā)
一個元素可以綁定多個事件,但是多個事件不能相互干擾
盡量給合適的元素選擇合適的事件
3疹鳄、常用事件:
點(diǎn)擊事件 onclick
失焦事件 onBlur
聚焦事件 onfocus
改變域?qū)ο? onchange
鼠標(biāo)懸停事件 onmouserover
鼠標(biāo)移開事件 onmouseout
鍵盤按下事件 onkeydown
鍵盤彈起事件 onkeyup
加載事件 onload:
onload 事件會在頁面或圖像加載完成后立即發(fā)生拧略。
onload 通常用于 <body> 元素,在頁面完全載入后(包括圖片瘪弓、css文件等等垫蛆。)執(zhí)行腳本代碼。
4腺怯、事件處理程序
DOM0級事件處理程序
不能綁定同一個元素同一個事件多次
DOM2級事件程序
可以綁定一個元素的內(nèi)容多次
addEventListener()和 removeEventListener()
所有 DOM 節(jié)點(diǎn)都包含這兩個方法袱饭,并且他們都接受 3 個參數(shù):
要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值呛占。
最后這個布爾值參數(shù)如果是 true虑乖,則表示在捕獲階段調(diào)用事件處理程序;
如果是 false 則表示在冒泡階段調(diào)用事件處理程序晾虑。
5疹味、事件流和事件模型
我們的事件最后都有一個特定的事件源,暫且將事件源看做是 HTML 的某個元素帜篇,那么當(dāng) 一個 HTML 元素產(chǎn)生一個事件時糙捺,該事件會在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播,路徑 所經(jīng)過的節(jié)點(diǎn)都會受到該事件笙隙,這個傳播過程稱為 DOM 事件流洪灯。
事件順序有兩種類型:事件捕獲和事件冒泡。 冒泡和捕獲其實(shí)都是事件流的不同表現(xiàn)逃沿,這兩者的產(chǎn)生是因?yàn)?IE 和 Netscape 兩個大公司 完全不同的事件流概念產(chǎn)生的婴渡。(事件流:是指頁面接受事件的順序)IE 的事件流是事件冒泡幻锁, Netscape 的事件流是事件捕獲流。
* 事件冒泡
IE 的事件流叫做事件冒泡边臼,即事件開始時由最具體的元素接受哄尔,然后逐級向上傳播到較為 不具體的節(jié)點(diǎn)(文檔)。例如下面的:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
如果點(diǎn)擊了頁面中的<div>元素柠并,那么這個 click 事件會按照如下順序傳播:
<div>
<body>
<html>
document
也就是說岭接,click 事件首先在<div>元素上發(fā)生,而這個元素就是我們單擊的元素臼予。然后鸣戴, click 事件沿 DOM 樹向上傳播,在每一級節(jié)點(diǎn)上都會發(fā)生粘拾,直到傳播到 document 對象窄锅。 所有現(xiàn)代瀏覽器都支持事件冒泡,但在具體實(shí)現(xiàn)上還是有一些差別缰雇。
* 事件捕獲
Netscape 提出的另一種事件流叫做事件捕獲入偷,事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早 接收到事件,而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件械哟。事件捕獲的用意在于在事件到達(dá)預(yù)定目標(biāo) 之前捕獲它疏之。還以前面的例子為例。那么單擊<div>元素就會按下列順序觸發(fā) click 事件:
document
<html>
<body>
<div>
在事件捕獲過程中暇咆,document 對象首先接收到 click 事件锋爪,然后沿 DOM 樹依次向下,一 直傳播到事件的實(shí)際目標(biāo)爸业,即<div>元素其骄。 雖然事件捕獲是 Netscape 唯一支持的事件流模式,但很多主流瀏覽器目前也都支持這種事 件流模型沃呢。盡管“DOM2 級事件”規(guī)范要求事件應(yīng)該從 document 對象開始傳播年栓,但這些瀏覽器都是從 window 對象開始捕獲的拆挥。
* DOM事件流
“DOM2 級事件”規(guī)定的事件流包括三個階段:事件捕獲階段薄霜、處于目標(biāo)階段和事件冒泡 階段。首先發(fā)生的是事件捕獲階段纸兔,為截獲事件提供了機(jī)會惰瓜。然后是實(shí)際的目標(biāo)接收到事件。 最后一個階段是冒泡階段汉矿,可以在這個階段對事件做出響應(yīng)崎坊。
二、BOM
BOM(Browser Object Model)瀏覽器對象模型
1洲拇、window對象
* 概念
BOM 的核心對象是 window奈揍,它表示瀏覽器的一個實(shí)例曲尸。window 對象有雙重角色,它既是 通過 JavaScript 訪問瀏覽器窗口的一個接口男翰,又是 ECMAScript 規(guī)定的 Global 對象另患。這意味著 在網(wǎng)頁中定義的任何一個對象、變量和函數(shù)蛾绎,都以 window 作為其 Global 對象昆箕,因此有權(quán)訪問 parseInt()等方法。如果頁面中包含框架租冠,則每個框架都擁有自己的 window 對象鹏倘,并且保存在 frames 集合中。在 frames 集合中顽爹,可以通過數(shù)值索引(從 0 開始纤泵,從左至右,從上到下)或 者框架的名稱來訪問相應(yīng)的 window 對象镜粤。
* window對象方法
系統(tǒng)對話框:
瀏覽器通過(實(shí)際是 window 對象的方法)alert()夕吻、confirm()、prompt()方法
可以調(diào)用對話框向用戶顯示消息繁仁。
(1)消息框:alert涉馅, 常用。
alert() 方法用于顯示帶有一條指定消息和一個 OK 按鈕的警告框黄虱。
(2)輸入框:prompt稚矿,返回提示框中的值。
prompt() 方法用于顯示可提示用戶進(jìn)行輸入的對話框捻浦。
參數(shù)(可選):
第一個參數(shù):要在對話框中顯示的純文本晤揣。
第二個參數(shù):默認(rèn)的輸入文本。
(3)確認(rèn)框:confirm朱灿,返回 true/false.
confirm() 方法用于顯示一個帶有指定消息和 OK 及取消按鈕的對話框昧识。
function test01(){
alert(1);
}
function test02(){
var flag=confirm("是否繼續(xù)?");
if(flag){
alert('是的');
}else{
alert("不對");
}
}
function test03(){
var name=prompt("輸入銀行卡號?");
alert(name);
}
打開窗口:
window.open()方法既可以導(dǎo)航到一個特定的 URL 也可以用來打開一個新的窗口
function openPage () {
window.open("http://www.baidu.com","_self");
}
_self、_parent盗扒、_top跪楞、_blank 代表打開頁面的位置
關(guān)閉窗口:
<input type="button" value="關(guān)閉窗口" onclick="window.close();" />
時間函數(shù):
setTimeout() : 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。通過返回的標(biāo)識也可以
clearTimeout(id) 來清除指定函數(shù)的執(zhí)行在 times 毫秒后執(zhí)行 function
指定的方法侣灶,執(zhí)行之前也可以取消
setInterval():可按照指定的周期(以毫秒計(jì))來調(diào)用函數(shù)或計(jì)算表達(dá)式甸祭,也可根據(jù)
返回的標(biāo)識用來結(jié)束。該方法會不停地調(diào)用函數(shù)褥影,直到 clearInterval() 被調(diào)
用或窗口被關(guān)閉池户。
//測試時間函數(shù) setTimeout
function openNew(){
setTimeout(function newPage(){
window.open('http://www.baidu.com');
} ,3000);
} //函數(shù)匿名使用時,加引號會報(bào)錯,加括號會立即執(zhí)行校焦。
function openBD(){
window.open('http://www.baidu.com');
}
function openNew1(){
id=setTimeout("openBD()",3000);
//使用函數(shù)名調(diào)用時赊抖,不加引號時不加括號,否則會立即執(zhí)行寨典;
//加引號時必須加括號熏迹,否則不執(zhí)行
}
//關(guān)閉clearTimeout
function releaseTimer(){
clearTimeout(id);
}
var id = setInterval(function,times)
clearInterval(id)
function test(){
console.log(".....");
} //window 是一個全局對象,通過全局對象調(diào)用 setInterval()函數(shù)
window.setInterval(test,1000);
注意:setTimeout之后指定的函數(shù)凝赛,
使用函數(shù)名調(diào)用時注暗,不加引號時不加括號,否則會立即執(zhí)行墓猎;加引號時必須加括號捆昏,否則不執(zhí)行。
函數(shù)匿名使用時毙沾,加引號會報(bào)錯骗卜,加括號會立即執(zhí)行。
* window 對象屬性
window 對象的雙重身份決定著左胞,在該對象中既有著核心語法中的全局方法和屬性寇仓,又有 著和瀏覽器相關(guān)的屬性和方法,一下的一些對象都是屬于 window 對象的屬性值烤宙。
- histroy 對象
* history 對象是歷史對象遍烦。
包含用戶(在瀏覽器窗口中)訪問過的 URL。history 對象是 window 對象的一部分躺枕,可通過 window.history 屬性對其進(jìn)行訪問服猪。
* history 對象的屬性:
length,返回瀏覽器歷史列表中的 URL 數(shù)量拐云。
* history 對象的方法:
back():加載 history 列表中的前一個 URL罢猪。
forward():加載歷史列表中的下一個 URL。當(dāng)頁面第一次訪問時叉瘩,還沒有下一個 url膳帕。
go(number|URL): URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪 問的 URL 在 History 的 URL 列表中的相對位置薇缅。go(-1)危彩,到上一個頁面 - location 對象
location 對象是 window 對象之一,提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息捅暴,還提供 了一些導(dǎo)航功能恬砂。也可通過 window.location 屬性來訪問咧纠。
* location 對象的屬性 :
href:設(shè)置或返回完整的 URL location 對象的方法
reload():重新加載當(dāng)前文檔蓬痒。
replace():用新的文檔替換當(dāng)前文檔。
// 得到當(dāng)前的url
var url = window.location.href;
console.log(url);
// 跳轉(zhuǎn)到指定頁面
//window.location.href = "03-history對象.html";
// window.location.;
function reload1() {
// 刷新頁面
//window.location.reload();
// 用指定頁面替換當(dāng)前頁面
window.location.replace("http://www.baidu.com");
}
- document 對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象漆羔。Document 對象使我們可以從腳 本中對 HTML 頁面中的所有元素進(jìn)行訪問梧奢。
* 訪問
Document 對象是 Window 對象的一部分狱掂,也可通 過 window.document 屬性對其進(jìn)行訪問。
* 屬性
document 對象的 body 屬性亲轨,提供對<body>元素的直接訪問
cookie 屬性趋惨,用來設(shè)置 或返回與當(dāng)前文檔有關(guān)的所有 cookie
write()方法,向文檔寫 HTML 表達(dá)式或 JavaScript 代碼惦蚊。
還有其他屬性和方法器虾。在 Document 對象中講解。 該對象作為 DOM 中的核心對象