事件委托
给父元素注册事件,当我们触发子元素的时候,利用事件冒泡的特点,会冒泡到父元素身上,从而触发父元素的事件
<ul>
<li>第1个孩子</li>
<li>第2个孩子</li>
<li>第3个孩子</li>
<li>第4个孩子</li>
<li>第5个孩子</li>
<!--<p>我变态</p>-->
</ul>
<script>
/* 点击每个小li 当前li 文字变为粉色 */
// 按照事件委托的方式 委托给父级 事件写到父级身上.
/* 1 获取元素 */
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
console.log('111')
// this指向的是ul
// 事件委托给了父亲
// this.style.color = 'red'
// 点击谁 谁才会变色
//console.dir(e)
//console.dir(e.target) // 就是我们点击的那个对象
// e.target.style.color = 'red'
// 我的需求，我们只要点击li才会有效果
// 测试的时候需要添加一个其它的标签
console.dir(e.target) // tagName: "LI"来判断
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
其它事件
页面加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
主要讲 -DOMContentLoaded 事件被触发
document.addEventListener('DOMContentLoaded', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
元素滚动事件
滚动条在滚动的时候持续触发的事件
01**-监听整个页面滚动,** scroll事件
scroll事件 可以被两个对象注册
// document对象 注册 scroll事件 document 文档对象
// window对象 注册 scroll事件
document.addEventListener('scroll', function () {
console.log('我滚了')
})
/*window.addEventListener('scroll', function () {
console.log('刘进强滚起来')
})*/
02 监听某个元素的内部滚动直接给某个元素加即可
<div class="box">我里面有很多很多的文字</div>
.box{
margin:100px auto
overflow: scroll;//直接利用CSS样式来添加就可以
width: 200px;
height: 200px;
border: 1px solid #000;
}
const box = document.querySelector('.box')
box.addEventListener('scroll', function () {
console.log('监听某个元素的内部滚动')
// scrollTop 被卷去的头部
console.log(box.scrollTop)
})
03-获取页面滚动被卷曲的头部
// 3.1 获取元素
const div = document.querySelector('div')
// 3.2 滚动事件
window.addEventListener('scroll', function () {
// console.log('我滚了')
// 获取到页面滚动的距离 页面 指的 html标签 (document.documentElement)
console.log(document.documentElement.scrollTop)
const n = document.documentElement.scrollTop//页面被卷曲进去的长度
// 条件判断 大于等于 100 显示 否则隐藏
if (n >= 100) {
div.style.display = 'block'
}else{
div.style.display = 'none'
}
})
运用在滚动页面到达一定距离显示/隐藏盒子/点击一键跳转到固定位置
04 - scrollTop细节问题
scrollTop可读写 不带单位
得到是什么数据 数字型 不带单位
document.documentElement.scrollTop = 800 (html文档被卷曲的距离)
document.documentElement.scrollTop = 0 (顶部距离为0)
页面滚动事件-滚动到指定的坐标
scrollTo() `方法可把内容滚动到指定的坐标
scrollTo() 方法可把内容滚动到指定的坐标
// 修改返回顶部案例
// document.documentElement.scrollTop = 0
//window.scrollTo(x, y)
//scrollTo() 方法可把内容滚动到指定的坐标
window.scrollTo(0, 0)
页面尺寸事件
01 -会在窗口尺寸改变的时候触发事件(resize)
02- 检测屏幕宽度(了解)
获取元素的可见部分宽高（不包含边框，margin，滚动条等）
clientWidth和clientHeight
元素尺寸于位置
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
获取位置：
获取元素距离自己定位父级元素的左、上距离(没有定位,就相对于浏览器页面顶部的距离)
offsetLeft和offsetTop注意是只读属性用的多的还是offsetTop这个
电梯导航
/* 思路分析
1.点击左侧每一个列表
1.1 排他思想修改样式 : 类名排他active
1.2 页面滚动到下标一致盒子位置 ：
页面滚动 document.documentElement.scrollTop
盒子位置 neirongList[i].offsetTop
*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 3000px; } .aside { position: fixed; left: 0; top: 50%; transform: translateY(-50%); } .item { height: 40px; line-height: 40px; text-align: center; padding: 0 10px; cursor: pointer; } .active { background-color: red; color: #fff; } .content { width: 660px; margin: 400px auto; } .neirong { height: 300px; margin-bottom: 20px; color: #fff; } .content1 { background-color: red; } .content2 { background-color: blue; } .content3 { background-color: orange; } .content4 { background-color: yellowgreen; } </style> </head> <body> <div class="aside"> <div class="item active">男装/女装</div> <div class="item">儿童服装/游乐园</div> <div class="item">电子产品</div> <div class="item">电影/美食</div> </div> <div class="content"> <div class="neirong content1">男装/女装</div> <div class="neirong content2">儿童服装/游乐园</div> <div class="neirong content3">电子产品</div> <div class="neirong content4">电影/美食</div> </div> <script> /* 思路分析 1.点击左侧每一个列表 1.1 排他思想修改样式 : 类名排他active 1.2 页面滚动到下标一致盒子位置 ： 页面滚动 document.documentElement.scrollTop 盒子位置 neirongList[i].offsetTop */ //1.获取元素 let itemList = document.querySelectorAll('.aside>.item')//左侧列表 let neirongList = document.querySelectorAll('.content>.neirong')//左侧列表 //2.点击每一个列表 for (let i = 0; i < itemList.length; i++) { itemList[i].onclick = function () { //3.事件处理 //3.1 排他思想修改样式 : 类名排他active //(1)干掉兄弟 document.querySelector('.item.active').classList.remove('active') //(2)复活自己 this.classList.add('active') //3.2 页面滚动到下标一致盒子的位置 document.documentElement.scrollTop = neirongList[i].offsetTop } } /* 3. 页面滚动事件 ： 当前显示的盒子对应下标 的 左侧列表高亮 左侧列表高亮 ： 排他修改类型 显示的盒子对应下标 : 第一个比 页面滚动距离 大的盒子 */ window.onscroll = function () { //遍历盒子的scrollTop，找第一个比 页面滚动距离 大的盒子 for (let i = 0; i < neirongList.length; i++) { // console.log(`页面滚动距离${document.documentElement.scrollTop}`) // console.log(`第${i}个盒子位置${neirongList[i].offsetTop}` ) if (neirongList[i].offsetTop + 100 > document.documentElement.scrollTop) { //排他修改左边下标的类名 document.querySelector('.item.active').classList.remove('active') //复活i下标列表 itemList[i].classList.add('active') //一旦找到第一个 位置 比 页面滚动距离大的盒子,就必须要break结束循环 break } } } </script> </body> </html>\
