前端javascript三大組成部分

??ECMAScript?標(biāo)準(zhǔn)語(yǔ)法?es5

DOM?(document?object?model)?文檔對(duì)象模型

○?主要是利用js來操作網(wǎng)頁(yè)的

?BOM（browser?object?model）?瀏覽器對(duì)象模型

○?瀏覽器提供一些方法

?BOM

??瀏覽器提供了一些方法給我們有機(jī)會(huì)操作瀏覽器的某一些內(nèi)容

??瀏覽器將他提供的API放在window上面,window是一個(gè)對(duì)象，里面有很多自帶的數(shù)據(jù)

window是一個(gè)全局作用域?所有的全局變量和函數(shù)也會(huì)自動(dòng)添加到window對(duì)象，使用的時(shí)候

變量或者函數(shù)會(huì)自動(dòng)去window查找

?

彈窗

○?window.alert()

○?alert()?提示框

○?prompt()?彈出輸入框

○?confirm()?確認(rèn)框

○?這個(gè)彈窗僅僅只在自己練習(xí)使用?真正開發(fā)項(xiàng)目我們需要自己實(shí)現(xiàn)彈窗

?

網(wǎng)頁(yè)的寬度和高度

○?window.innerWidth

○?window.innerHeight

?

屏幕分辨率寬度和高度

○?window.screen.width

○?window.screen.height

?

瀏覽器事件

onload?網(wǎng)頁(yè)加載完成的事件

window.onload=?function(){

?//?有一些操作需要等待網(wǎng)頁(yè)加載完成之后才執(zhí)行}

onresize?網(wǎng)頁(yè)尺寸變化執(zhí)行的事件

window.onresize=?function(){

?//?每一次網(wǎng)頁(yè)尺寸變化都會(huì)觸發(fā)這個(gè)事件//?第一次進(jìn)入的時(shí)候是不會(huì)觸發(fā)}

○

onscroll?網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)事件

window.onscroll=?function(){

?//?只要滾動(dòng)滾動(dòng)了就會(huì)觸發(fā)}

?獲取元素尺寸

??offsetWidth?內(nèi)容區(qū)+padding+border

??clientWidth?內(nèi)容區(qū)+padding

獲取元素偏移

??含義

左偏移

○?offsetLeft

上偏移

○?offsetTop

獲取邊框的寬度

??clientLeft

??clientTop

創(chuàng)建元素

??document.createElement()

添加元素

??appendChild()

??insertBefore()

修改元素

??replaceChild()

刪除元素

??removeChild()

克隆元素

??cloneNode(true)

DOM事件

??事件：由用戶行為觸發(fā)的代碼

構(gòu)成三要素

○?事件源?給哪個(gè)元素綁定事件

○?事件類型?用戶行為?click?dblclick...

○?事件處理函數(shù)?要執(zhí)行代碼?就是函數(shù)

綁定事件

○?事件源.on+事件類型?=?事件處理函數(shù)

添加事件監(jiān)聽的方式

事件源.addEventListener(事件類型,?事件處理函數(shù),?執(zhí)行機(jī)制)

?默認(rèn)為false?使用是冒泡機(jī)制

?設(shè)置為true?使用是捕獲機(jī)制

?

on方式和addEventListener的區(qū)別

1.?on方式只能綁定一個(gè)事件處理函數(shù)?addEventListener可以支持多個(gè)事件處理函數(shù)

取消事件方式不同

??removeEventListener()

2.

3.?支持的事件機(jī)制不一樣（后面講）addEventListener可以支持兩種機(jī)制

?

事件對(duì)象（event）

??含義：事件對(duì)象是一個(gè)在事件處理函數(shù)內(nèi)部?包含了事件觸發(fā)的時(shí)候詳細(xì)信息

獲取event

每一個(gè)事件處理函數(shù)里面都會(huì)自帶一個(gè)event，這種可能有一些瀏覽器獲取得到是

??