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
})