1.事件流

事件流是對事件執行過程的描述，了解事件的執行過程有助于加深對事件的理解，提升開發實踐中對事件運用的靈活度。

2.捕獲和冒泡

捕獲階段是【從父到子】的傳導過程，冒泡階段是【從子向父】的傳導過程。

// 第三個形參加true就是事件捕獲
 document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
 },true)
// 第三個形參加flase就是事件冒泡.
document.querySelector('.box1').addEventListener('click',function(){
console.log(2);
 },flase)

// 事件冒泡可以不用加flase,因為默認值就是flase.事件捕獲需要加true

3.阻止冒泡

1- 阻止事件冒泡 e.stopPropagation(),僅在自身實現.

2- 阻止網頁跳轉 e.preventDefault(), a標簽和表單有默認跳轉和提交,可以用這個阻止跳轉和提交.

// 阻止事件冒泡
document.querySelector('.box1').addEventListener('click',function(e){
 console.log(2);
e.stopPropagation()
 },false)
// 阻止a標簽進行網頁跳轉
 document.querySelector('a').addEventListener('click',function(e){
  e.preventDefault()
   alert('跳轉失敗了')
  })

4.解綁事件(了解即可)

// L0級別寫法
 box1.onclick = function(){
console.log('注冊了事件');
 }
box2.onclick = function(){
// 將box1身上的點擊事件解綁,dom元素.on事件類名 = null
box1.onclick = null
 }

5.事件委托

1- 事件委托的原理: 利用事件冒泡的機制(從里往外)將事件注冊委托給父元素.

2- 事件委托的優點: 減少代碼量,提高瀏覽器解析速度.

// 獲取ul DOM對象
 const ul = document.querySelector('ul')
// 給ul 注冊點擊事件
ul.addEventListener('click',function(e){
// e.target 指的是事件觸發的元素,事件源.tagName 指的是元素名字.
// e.target.tagName === 'LI' 是用排除法將UL/P,給排除了,只有點擊LI時,才會觸發事件,打印出'hello'
if(e.target.tagName === 'LI'){
console.log('hello');
 }
 })

6.滾動事件

// 2. 給頁面注冊滾動事件(重點)
 // 2.1頁面 window對象或者document對象注冊scroll事件
window.addEventListener('scroll',function(e){
// 2.2 監測頁面卷去的距離,要設置變量獲取這個值
const jin = document.documentElement.scrollTop
// 2.3 當卷起的值大于等于300時,box2這個盒子顯示出來,否則就隱藏起來.
if(jin >= 300){
box2.style.display = 'block'
 }else{
box2.style.display = 'none'
 }
 })

7.頁面加載事件

加載外部資源（如圖片、外聯css和JAVAScript等）加載完畢時觸發的事件

有些時候需要等頁面資源全部處理完了做一些事情

事件名：load

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

8.頁面尺寸事件

會在窗口尺寸改變的時候觸發事件

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