WebAPIs事件流与事件委托与其他事件
一.事件流
事件流与两个阶段说明
事件流指的是事件完整执行中的流动路径
分为捕获和冒泡两个阶段
四川》成都》武侯区》目标-----捕获阶段
武侯区》成都》四川-----冒泡阶段
** 实际工作中以冒泡为主**
事件冒泡概念：当以个元素触发事件后，会依次向上调用所有父级元素的同名事件
而事件捕获是依次从父级向下调用
DOM，addEverntlistener(事件类型，事件处理函数，是否使用捕获函数)
//第三个参数传入true代表捕获阶段触发，false代表冒泡阶段触发
//一般默认false
阻止冒泡
因为默认有冒泡模式的存在，容易导致事件影响到父级元素
事件对象.stopPropagation()
解绑事件
addEverntlistener方式必须使用：
removeEventListener（事件类型,事件处理函数,[获取捕获或者冒泡阶段]）
//匿名函数不能解绑
二.事件委托
同时给多个元素注册事件，以往是通过for循环
通过委托减少注册次数，利用事件冒泡的特点
原理：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target.tagName可以获得真正触发事件的元素
<ul>
<li>第1个孩子li>
<li>第2个孩子li>
<li>第3个孩子li>
<li>第4个孩子li>
<li>第5个孩子li>
<p>我不会变色p>
ul>
<script>
//点击某个li，该li元素变为红色
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
script>
阻止元素默认行为
某些情况需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转
e.preventDefault()
<form action="http://www.baidu.com">
<input type="submit" value="提交">form>
<script>
const form = document.querySelector('form')
form.addEventListener('click',function(e){
e.preventDefault()
})
script>
三.其他事件
1.页面加载事件：加载外部资源（如图片，外联CSS和JS等）加载完毕时触发的事件
//页面加载事件
window.addEventListener('load',function(){//执行的操作})
2.元素滚动事件：滚动条在滚动时持续触发的事件
1. 使用
通过 addEventListener 监听 scroll 事件，可作用于 window（全局滚动）或具体元素（如带滚动条的容器）：
<script>
// 监听全局页面滚动
window.addEventListener('scroll', function() {
console.log('页面滚动了');
});
// 监听某个元素的滚动（如带滚动条的div）
var container = document.getElementById('scrollContainer');
container.addEventListener('scroll', function() {
console.log('容器滚动了');
});
script>
2. 滚动属性
| 属性/方法 | 说明 |
|---|---|
window.scrollY |
页面纵向滚动的距离（像素） |
window.scrollX |
页面横向滚动的距离（像素） |
element.scrollTop |
元素内容纵向滚动的距离（适用于容器） |
element.scrollLeft |
元素内容横向滚动的距离（适用于容器） |
document.documentElement.scrollHeight |
整个文档的总高度（包括滚动区域） |
window.innerHeight |
浏览器视口的高度 |
3. 应用
（1）滚动时导航栏样式变化
<style>
.nav {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background: transparent;
transition: background 0.3s;
}
.nav.scrolled {
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
style>
<nav class="nav">导航栏nav>
<script>
var nav = document.querySelector('.nav');
window.addEventListener('scroll', function() {
// 当滚动距离超过50px时，添加scrolled类
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
script>
（2）回到顶部按钮
<style>
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
padding: 10px 15px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
display: none; /* 默认隐藏 */
}
style>
<button class="back-to-top">回到顶部button>
<script>
var backToTopBtn = document.querySelector('.back-to-top');
// 监听滚动，控制按钮显示/隐藏
window.addEventListener('scroll', function() {
if (window.scrollY > 300) {
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
});
// 点击按钮回到顶部
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动
});
});
script>
3.页面尺寸事件：会在窗口尺寸改变的时候触发事件
window.addEventListener('resize'.function () {
//执行的代码
})
//检测屏幕宽度
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
console.log(w)
})