事件

事件流

指的是事件完整執(zhí)行過(guò)程中的流動(dòng)路徑

兩個(gè)階段：

• 捕獲階段：從大到小
• 冒泡階段：從小到大

實(shí)際開(kāi)發(fā)中都是使用事件冒泡為主

事件捕獲

從DOM的根元素開(kāi)始取執(zhí)行對(duì)應(yīng)的事件（從外到里）

document.addEventListener(事件類型，事件處理函數(shù)，是否使用捕獲機(jī)制)
第三個(gè)參數(shù)傳入true代表是捕獲階段觸發(fā)，默認(rèn)false（很少使用）

事件冒泡

當(dāng)一個(gè)元素的事件被觸發(fā)時(shí)，同樣的事件將會(huì)在該元素的所有祖先元素中依次被觸發(fā)。這一過(guò)程稱為冒泡

簡(jiǎn)單理解：當(dāng)一個(gè)元素觸發(fā)事件后，會(huì)依次向上調(diào)用所有父級(jí)元素的同名事件

事件冒泡默認(rèn)時(shí)存在的（L2事件監(jiān)聽(tīng)也是默認(rèn)事件冒泡）

<style>.father{w 500px;h 500px;bgc blue;}.son{w 200px;h 200px;bgc skyblue;}</style>
<div class="father"><div class="son"></div>
</div>

const father = document.querySelector('.father')
const son = document.querySelector('son')
document.addEventListener('click',function(){alert('我是爺爺')
})
father.addEventListener('click',function(){alert('我是爸爸')
})
son.addEventListener('click',function(){alert('我是兒子')
})

此時(shí)點(diǎn)擊son盒子會(huì)先彈出提示兒子---> 爸爸----> 爺爺

阻止冒泡

• 問(wèn)題：因?yàn)槟J(rèn)就有冒泡模式的存在，所以容易導(dǎo)致事件影響到父級(jí)元素

• 需求：若想把時(shí)間就限制在當(dāng)前元素內(nèi)，就需要阻止事件冒泡

• 前提：阻止事件冒泡需要拿到事件對(duì)象

• 語(yǔ)法：

  事件對(duì)象.stopPropagation();//事件對(duì)象：回調(diào)函數(shù)中的參數(shù)
  

  此方法可以阻斷事件流動(dòng)傳播，不光在冒泡階段有效，捕獲階段也有效

const father = document.querySelector('.father')
const son = document.querySelector('son')
document.addEventListener('click',function(){alert('我是爺爺')
})
father.addEventListener('click',function(){alert('我是爸爸')
})
son.addEventListener('click',function(e){alert('我是兒子')e.stopPropagrtion();//阻斷事件流動(dòng)傳播
})

解綁事件

事件解綁傳統(tǒng)方式(L0)

on事件方式，直接使用null覆蓋就可以實(shí)現(xiàn)事件的解綁

語(yǔ)法：

btn.onclick=function(){alert('點(diǎn)擊了我');
}
btn.onclick=null;

事件解綁（L2）

addEventListener方式，必須使用removeEventListener(事件類型，事件處理函數(shù)，[獲取捕獲或者冒泡階段])

function fn(){alert('點(diǎn)擊了我')
}
btn.addEventListener('click',fn);//綁定事件
btn.removeEventListener('click',fn);//解綁事件

注意：匿名函數(shù)無(wú)法被解綁

鼠標(biāo)經(jīng)過(guò)事件的區(qū)別

鼠標(biāo)經(jīng)過(guò)事件：

• mouseover和mouseout會(huì)有冒泡效果
• mouseenter和mouseleave沒(méi)有冒泡效果（推薦使用）

事件委托

事件委托是利用事件流的特征解決一些特定的開(kāi)發(fā)需求

優(yōu)點(diǎn)：減少注冊(cè)次數(shù)，可以提高程序性能

原理：事件委托其實(shí)是利用事件冒泡的特點(diǎn)

? 給父元素注冊(cè)事件，當(dāng)我們觸發(fā)子元素的時(shí)候，會(huì)冒泡到父元素身上，從而觸發(fā)父元素的事件

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><p>我不需要變色</p>
</ul>

//點(diǎn)擊li標(biāo)簽，當(dāng)前標(biāo)簽變?yōu)榧t色（p標(biāo)簽不變色）
const ul =document.querySelector('ul');
ul.addEventListener('click',function(e){//傳遞事件對(duì)象if(e.target.tagName==='LI'){//判斷獲取到的元素標(biāo)簽類型是否為li標(biāo)簽e.target.style.color='red';//通過(guò)target屬性獲得，點(diǎn)擊對(duì)象的信息，并設(shè)置顏色} 
})

阻止默認(rèn)行為

語(yǔ)法：

e.preventDefault()

<form action="https//www.baidu.com"><input type="submit" value="提交">
</form>
<a href="www.baidu.com">百度</a><script>const form = document.querySelector('form');form.addEventListener('submit',function(e){e.preventDefault();});const a = document.querySelector('a');a.addEventListener('click',function(e){e.preventDefault();//阻止默認(rèn)行為，點(diǎn)擊不會(huì)跳轉(zhuǎn)});
</script>

頁(yè)面加載事件

加載外部資源（如圖片，外聯(lián)CSS和JavaScript等）加載完畢時(shí)觸發(fā)的事件

事件名：load

監(jiān)聽(tīng)頁(yè)面所有資源加載完畢：給window添加load事件

window.addEventListener('load',function(){})

事件名：DOMContentLoaded

作用：當(dāng)初始的HTML文檔被完全加載和解析完成之后，DOMContentLoaded事件被觸發(fā)，而無(wú)需等待樣式表、圖片等完全加載

document.addEventListener('DOMContentLoaded',function(){});

頁(yè)面滾動(dòng)事件

滾動(dòng)條在滾動(dòng)的時(shí)候持續(xù)觸發(fā)的事件

事件名：scroll

監(jiān)聽(tīng)整個(gè)頁(yè)面的滾動(dòng)：給window（推薦）或document添加scroll事件

window.addEventListener('scroll',function(){//頁(yè)面滾動(dòng)事件})

也可以給某個(gè)元素添加，監(jiān)聽(tīng)某個(gè)元素內(nèi)部的滾動(dòng)

頁(yè)面平滑滾動(dòng)：給html標(biāo)簽添加以下css樣式

html{scroll-behavior: smooth;
}

獲取位置

scrollLeft和scrollTop（屬性）

• 獲取被卷去的大小
• 獲取元素內(nèi)容往左，往上滾出去看不到的距離
• 這兩個(gè)值是可讀寫的
• 在scoll事件里面獲取被卷去的距離

window.addEventListener('scroll',function(){//document.documentElement 獲取當(dāng)前頁(yè)面的html元素console.log(document.documentElement.scrollTop);//★打印垂直方向卷去的像素const n =document.documentElement.scrollTop;if(n>=100){元素.style.display='block'}else{元素.style.display='none'}
});

滾動(dòng)到指定的坐標(biāo)

語(yǔ)法：元素.scrollTo(x,y)

window.scrollTo(0,1000)

頁(yè)面尺寸事件

• 會(huì)在窗口尺寸改變的時(shí)候觸發(fā)事件：resize

  window.addEventListener('resize',function(){})
  

• 檢測(cè)屏幕寬度

  獲取元素的可見(jiàn)部分寬高（不包含邊框，margin，滾動(dòng)條等）

  clientWidth和clientheight

  window.addEventListener('resize',function(){let w = document.documentElement.clientWidth;console.log(w);
  })
  

元素的尺寸與位置

獲取寬高：

• 獲取元素的自身寬高、包含元素自身設(shè)置的寬高、padding、border
• offsetWidth和offsetHeigth
• 獲取出來(lái)的是數(shù)值，方便計(jì)算
• 注意：獲取的是可視寬高，如果盒子是隱藏的，獲取的結(jié)果是0

獲取位置：

• 獲取元素距離自己定位父級(jí)元素的左、上距離
• offsetLeft和offsetTop注意是只讀屬性

獲取元素大小及相對(duì)于視口的位置

element.getBoundingClientRect()//返回當(dāng)前元素的位置信息對(duì)象