一烹吵、事件流:
1.綁定事件:
想要給一個(gè)元素綁定事件涤姊,我們有兩種方法:使用內(nèi)聯(lián)事件或事件監(jiān)聽器疹瘦。在之前的課程中,我們一直使用的是內(nèi)聯(lián)事件來為元素綁定事件
案例見事件流.html
內(nèi)聯(lián)事件:.onclick
事件監(jiān)聽: .addEventListener('事件',function(){})
兩種方法都能實(shí)現(xiàn)相同的效果噩翠,能成功的為按鈕綁定了點(diǎn)擊事件戏自,但區(qū)別是使用addEventLitener可以無限制第為元素綁定事件,而內(nèi)聯(lián)事件后面的會(huì)覆蓋前面的 ?案例見 事件流2.html
二伤锚、事件冒泡與事件捕獲
用事件監(jiān)聽器為三個(gè)div元素綁定點(diǎn)擊事件擅笔,最外層的div寬高是300px,中間的div寬高都是200px屯援,最內(nèi)層的div寬高都是100px猛们,那么思考一下,點(diǎn)擊最內(nèi)層的div狞洋,事件會(huì)如何觸發(fā)弯淘,是只觸發(fā)最內(nèi)層的div,還是從內(nèi)到外依次觸發(fā)吉懊,還是從外到內(nèi)依次觸發(fā)
案例見事件冒泡.html
通過上面的例子我們可以看到庐橙,事件是從最內(nèi)層開始觸發(fā),然后依次向外借嗽,輸出的順序是div3-div2-div1态鳖。導(dǎo)致這種順序的原因是因?yàn)椋菏录饔惺录东@階段和事件冒泡階段,事件捕獲階段是從最外層元素開始一層一層進(jìn)入到事件目標(biāo)(也就是我們點(diǎn)擊的那個(gè)元素)恶导,到達(dá)事件目標(biāo)后浆竭,進(jìn)入事件冒泡階段,事件從最內(nèi)層流向最外層,事件默認(rèn)情況下在冒泡階段觸發(fā)兆蕉,所以我們看到的是先輸出div3,最后輸出div1羽戒。
我們也可以將事件設(shè)置為捕獲階段觸發(fā)缤沦,
案例見事件捕獲.html
只要在添加事件方法中添加第三個(gè)參數(shù)為true,事件就會(huì)在捕獲階段被觸發(fā)虎韵,這樣輸出的順序就變成了div1-div2-div3。但是在日常開發(fā)中缸废,我們幾乎不用做此修改包蓝,讓事件在冒泡階段觸發(fā)就可以了。 ???
三企量、事件委托案例見事件委托
事件委托:可以簡(jiǎn)單第理解為將子集的事件委托給父級(jí)來處理
案例:網(wǎng)頁中有兩個(gè)按鈕测萎,他們的父級(jí)是一個(gè)div標(biāo)簽,現(xiàn)在我們希望給這兩個(gè)按鈕綁定事件届巩,當(dāng)我們點(diǎn)擊按鈕的時(shí)候輸出按鈕的文本內(nèi)容硅瞧,按照我們之前學(xué)過的知識(shí)
四、計(jì)時(shí)器
一次性定時(shí)器
???????????????????setTimeOut(function(){
//1秒后執(zhí)行
???????????????????},1000)
停止一次性定時(shí)器:clearTimeout();
永久性定時(shí)器
??????????????????setInterval(function(){
//1秒后執(zhí)行恕汇,并且每隔一秒執(zhí)行一次
??????????????????},1000)
停止永久性定時(shí)器的方法:clearInterval();