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. 滚动属性

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.clientWidthconsole.log(w)})