JavaScript-事件

事件

事件流

指的是事件完整执行过程中的流动路径

两个阶段：

• 捕获阶段：从大到小
• 冒泡阶段：从小到大

实际开发中都是使用事件冒泡为主

事件捕获

从DOM的根元素开始取执行对应的事件（从外到里）

document.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
第三个参数传入true代表是捕获阶段触发，默认false（很少使用）

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程称为冒泡

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

事件冒泡默认时存在的（L2事件监听也是默认事件冒泡）

<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('我是儿子')
})

此时点击son盒子会先弹出提示儿子---> 爸爸----> 爷爷

阻止冒泡

• 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

• 需求：若想把时间就限制在当前元素内，就需要阻止事件冒泡

• 前提：阻止事件冒泡需要拿到事件对象

• 语法：

  事件对象.stopPropagation();//事件对象：回调函数中的参数
  

  此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

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();//阻断事件流动传播
})

解绑事件

事件解绑传统方式(L0)

on事件方式，直接使用null覆盖就可以实现事件的解绑

语法：

btn.onclick=function(){alert('点击了我');
}
btn.onclick=null;

事件解绑（L2）

addEventListener方式，必须使用removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])

function fn(){alert('点击了我')
}
btn.addEventListener('click',fn);//绑定事件
btn.removeEventListener('click',fn);//解绑事件

注意：匿名函数无法被解绑

鼠标经过事件的区别

鼠标经过事件：

• mouseover和mouseout会有冒泡效果
• mouseenter和mouseleave没有冒泡效果（推荐使用）

事件委托

事件委托是利用事件流的特征解决一些特定的开发需求

优点：减少注册次数，可以提高程序性能

原理：事件委托其实是利用事件冒泡的特点

​ 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

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

//点击li标签，当前标签变为红色（p标签不变色）
const ul =document.querySelector('ul');
ul.addEventListener('click',function(e){//传递事件对象if(e.target.tagName==='LI'){//判断获取到的元素标签类型是否为li标签e.target.style.color='red';//通过target属性获得，点击对象的信息，并设置颜色} 
})

阻止默认行为

语法：

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();//阻止默认行为，点击不会跳转});
</script>

页面加载事件

加载外部资源（如图片，外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：给window添加load事件

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

事件名：DOMContentLoaded

作用：当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图片等完全加载

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

页面滚动事件

滚动条在滚动的时候持续触发的事件

事件名：scroll

监听整个页面的滚动：给window（推荐）或document添加scroll事件

window.addEventListener('scroll',function(){//页面滚动事件})

也可以给某个元素添加，监听某个元素内部的滚动

页面平滑滚动：给html标签添加以下css样式

html{scroll-behavior: smooth;
}

获取位置

scrollLeft和scrollTop（属性）

• 获取被卷去的大小
• 获取元素内容往左，往上滚出去看不到的距离
• 这两个值是可读写的
• 在scoll事件里面获取被卷去的距离

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

滚动到指定的坐标

语法：元素.scrollTo(x,y)

window.scrollTo(0,1000)

页面尺寸事件

• 会在窗口尺寸改变的时候触发事件：resize

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

• 检测屏幕宽度

  获取元素的可见部分宽高（不包含边框，margin，滚动条等）

  clientWidth和clientheight

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

元素的尺寸与位置

获取宽高：

• 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
• offsetWidth和offsetHeigth
• 获取出来的是数值，方便计算
• 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

获取位置：

• 获取元素距离自己定位父级元素的左、上距离
• offsetLeft和offsetTop注意是只读属性

获取元素大小及相对于视口的位置

element.getBoundingClientRect()//返回当前元素的位置信息对象