長(zhǎng)春站最新通知,數(shù)字營(yíng)銷(xiāo)的定義是,個(gè)人網(wǎng)頁(yè)設(shè)計(jì)思路怎么寫(xiě),安陽(yáng)建設(shè)網(wǎng)站哪家好#xff08;詳細(xì)資料和相關(guān)課程可搜b站黑馬程序員#xff09;一、事件流1.事件流與兩個(gè)階段說(shuō)明事件流指的是事件完整執(zhí)行過(guò)程中的流動(dòng)路徑說(shuō)明#xff1a;假設(shè)頁(yè)面里有個(gè)div#xff0c;當(dāng)觸發(fā)事件時(shí)#xff0c;會(huì)經(jīng)歷兩個(gè)階段#xff0c;分別是捕獲階段、冒泡階段簡(jiǎn)單來(lái)…詳細(xì)資料和相關(guān)課程可搜b站黑馬程序員一、事件流1.事件流與兩個(gè)階段說(shuō)明事件流指的是事件完整執(zhí)行過(guò)程中的流動(dòng)路徑說(shuō)明假設(shè)頁(yè)面里有個(gè)div當(dāng)觸發(fā)事件時(shí)會(huì)經(jīng)歷兩個(gè)階段分別是捕獲階段、冒泡階段簡(jiǎn)單來(lái)說(shuō)捕獲階段是 從父到子 冒泡階段是從子到父實(shí)際工作都是使用事件冒泡為主2.事件捕獲事件捕獲概念從DOM的根元素開(kāi)始去執(zhí)行對(duì)應(yīng)的事件 (從外到里)addEventListener第三個(gè)參數(shù)傳入true代表是捕獲階段觸發(fā)很少使用3.事件冒泡事件冒泡當(dāng)一個(gè)元素的事件被觸發(fā)時(shí)同樣的事件將會(huì)在該元素的所有祖先元素中依次被觸發(fā)。這一過(guò)程被稱(chēng)為事件冒泡簡(jiǎn)單理解當(dāng)一個(gè)元素觸發(fā)事件后會(huì)依次向上調(diào)用所有父級(jí)元素的同名事件4.阻止冒泡因?yàn)槟J(rèn)就有冒泡模式的存在所以容易導(dǎo)致事件影響到父級(jí)元素若想把事件就限制在當(dāng)前元素內(nèi)就需要阻止事件冒泡阻止事件冒泡需要拿到事件對(duì)象語(yǔ)法此方法可以阻斷事件流動(dòng)傳播不光在冒泡階段有效捕獲階段也有效使用我們某些情況下需要阻止默認(rèn)行為的發(fā)生比如 阻止鏈接的跳轉(zhuǎn)表單域跳轉(zhuǎn)5.解綁事件addEventListener方式必須使用語(yǔ)法removeEventListener(事件類(lèi)型, 事件處理函數(shù), [獲取捕獲或者冒泡階段])6.鼠標(biāo)經(jīng)過(guò)事件的區(qū)別二、事件委托事件委托是利用事件流的特征解決一些開(kāi)發(fā)需求的知識(shí)技巧優(yōu)點(diǎn)減少注冊(cè)次數(shù)可以提高程序性能原理事件委托其實(shí)是利用事件冒泡的特點(diǎn)。給父元素注冊(cè)事件當(dāng)我們觸發(fā)子元素的時(shí)候會(huì)冒泡到父元素身上從而觸發(fā)父元素的事件實(shí)現(xiàn)事件對(duì)象.target. tagName 可以獲得真正觸發(fā)事件的元素三、其他事件1.頁(yè)面加載事件1加載外部資源如圖片、外聯(lián)CSS和JavaScript等加載完畢時(shí)觸發(fā)的事件事件名load監(jiān)聽(tīng)頁(yè)面所有資源加載完畢給 window 添加 load 事件注意不光可以監(jiān)聽(tīng)整個(gè)頁(yè)面資源加載完畢也可以針對(duì)某個(gè)資源綁定load事件2當(dāng)初始的 HTML 文檔被完全加載和解析完成之后DOMContentLoaded 事件被觸發(fā)而無(wú)需等待樣式表、圖像等完全加載事件名DOMContentLoaded監(jiān)聽(tīng)頁(yè)面DOM加載完畢給 document 添加 DOMContentLoaded 事件2.元素滾動(dòng)事件1滾動(dòng)條在滾動(dòng)的時(shí)候持續(xù)觸發(fā)的事件事件名scroll監(jiān)聽(tīng)整個(gè)頁(yè)面滾動(dòng)給 window 或 document 添加 scroll 事件監(jiān)聽(tīng)某個(gè)元素的內(nèi)部滾動(dòng)直接給某個(gè)元素加即可2頁(yè)面滾動(dòng)事件-滾動(dòng)到指定的坐標(biāo)scrollTo() 方法可把內(nèi)容滾動(dòng)到指定的坐標(biāo)語(yǔ)法元素.scrollTo(x, y)3.頁(yè)面尺寸事件會(huì)在窗口尺寸改變的時(shí)候觸發(fā)事件resize頁(yè)面尺寸事件-獲取元素寬高獲取寬高獲取元素的可見(jiàn)部分寬高不包含邊框margin滾動(dòng)條等clientWidth和clientHeight四、元素尺寸位置1.使用場(chǎng)景前面案例滾動(dòng)多少距離都是我們自己算的最好是頁(yè)面滾動(dòng)到某個(gè)元素就可以做某些事。簡(jiǎn)單說(shuō)就是通過(guò)js的方式得到元素在頁(yè)面中的位置這樣我們可以做頁(yè)面滾動(dòng)到這個(gè)位置就可以做某些操作省去計(jì)算了。獲取寬高1獲取元素的自身寬高、包含元素自身設(shè)置的寬高、padding、border。2offsetWidth和offsetHeight3獲取出來(lái)的是數(shù)值,方便計(jì)算。注意: 獲取的是可視寬高, 如果盒子是隱藏的,獲取的結(jié)果是0獲取位置1獲取元素距離自己定位父級(jí)元素的左、上距離2offsetLeft和offsetTop 注意是只讀屬性3element.getBoundingClientRect() 方法返回元素的大小及其相對(duì)于視口的位置2.其他方法