JS的事件和BOM模型

一渤早、事件
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)崎坊。
clipboard.png

二、BOM
BOM(Browser Object Model)瀏覽器對象模型


clipboard1.png

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 對象的屬性值烤宙。

  1. 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)危彩,到上一個頁面
  2. 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");
}   
  1. 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 中的核心對象
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蹦锋,一起剝皮案震驚了整個濱河市兆沙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌莉掂,老刑警劉巖葛圃,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異憎妙,居然都是意外死亡库正,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門厘唾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來褥符,“玉大人,你說我怎么就攤上這事抚垃∈舭辏” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵讯柔,是天一觀的道長抡蛙。 經(jīng)常有香客問我,道長魂迄,這世上最難降的妖魔是什么粗截? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮捣炬,結(jié)果婚禮上熊昌,老公的妹妹穿的比我還像新娘。我一直安慰自己湿酸,他們只是感情好婿屹,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著推溃,像睡著了一般昂利。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天蜂奸,我揣著相機(jī)與錄音犁苏,去河邊找鬼。 笑死扩所,一個胖子當(dāng)著我的面吹牛围详,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播祖屏,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼助赞,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了袁勺?” 一聲冷哼從身側(cè)響起嫉拐,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎魁兼,沒想到半個月后婉徘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡咐汞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年盖呼,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片化撕。...
    茶點(diǎn)故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡几晤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出植阴,到底是詐尸還是另有隱情蟹瘾,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布掠手,位于F島的核電站憾朴,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏喷鸽。R本人自食惡果不足惜众雷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望做祝。 院中可真熱鬧砾省,春花似錦、人聲如沸混槐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽声登。三九已至狠鸳,卻和暖如春揣苏,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碰煌。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工舒岸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绅作,地道東北人芦圾。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像俄认,于是被迫代替她去往敵國和親个少。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容