Day3 WebAPIs:事件流

2023-12-28 19:24:15

3.事件流

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

3.1 事件流与两个阶段说明

事件捕获和事件冒泡（冒泡用的居多）

3.2 事件捕获（了解）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

3.3 事件冒泡（重点）

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

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

3.4 阻止冒泡

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

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

  • 前提：组织事件冒泡需要拿到事件对象

  • 语法：事件对象.stopPropagation()

小知识点：阻止默认行为 e.preventDefault()

3.5 解绑事件

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

  • 语法：

    <script>
//绑定事件
btn.οnclick=function(){
    alert('点击了')
}
//解绑事件L1
btn.οnclick=null
---------------------------------
function fn(){
    alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件L2
btn.removeEventListener('click',fn)
</script>

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

  • 鼠标经过事件的区别

mouseover和mouseout会有冒泡效果

mouseenter 和mouseleave没有冒泡效果（推荐）

3.6 事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

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

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

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

    • 如何找到真正出发的元素：事件对象.target.tagName

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
</head>
?
<body>
 ? ?<ul>
 ? ? ? ?<li>第1个孩子</li>
 ? ? ? ?<li>第2个孩子</li>
 ? ? ? ?<li>第3个孩子</li>
 ? ? ? ?<li>第4个孩子</li>
 ? ? ? ?<li>第5个孩子</li>
 ? ? ? ?<p>我不需要变色</p>
 ? ?</ul>
 ? ?<script>
 ? ? ? ?const ul = document.querySelector('ul')
 ? ? ? ?ul.addEventListener('click', function (e) {
 ? ? ? ? ? ?//e.target.style.color = 'red'
 ? ? ? ? ? ?//之点击li才有效果
 ? ? ? ? ? ?if (e.target.tagName === 'LI') {
 ? ? ? ? ? ? ? ?e.target.style.color = 'red'
 ? ? ? ? ?  }
 ? ? ?  })
 ? ?</script>
</body>
?
</html>
?
3.7 其他事件

3.7.1 页面加载事件

  • 事件名：load

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

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

//执行代码

})

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<script>
 ? ? ? ?window.addEventListener('load', function () {
 ? ? ? ? ? ?const btn = document.querySelector('button')
 ? ? ? ? ? ?btn.addEventListener('click', function () {
 ? ? ? ? ? ? ? ?alert(11);
 ? ? ? ? ?  })
 ? ? ?  })
 ? ?</script>
</head>
?
<body>
 ? ?<button>点击</button>
</body>
?
</html>

  • 事件名：DOMContentLoaded

监听页面DOM加载完毕：给document添加DOMConentloaded事件

3.7.2元素滚动事件

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

  • 事件名：scroll

window.addEventListerner('scroll',function(){ })

  • scrollTop和scrollLeft（属性）

window.addEventListener('scroll',function(){
    const n=document.documentElement.scrollTop
    console.log(n)
})

检测页面滚动的头部距离（被卷去的头部）用这个属性：document.documentElement.scrollTop

（了解）

<script>
页面滚动到指定坐标：scrollTo()
?
语法：元素.scrollTo(x,y) 
?
//让页面滚动到y轴1000像素位置
?
window.scrollTo(0,1000)
</script>

3.7.3 页面尺寸事件

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

clientWidth和clientHeight

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ?div {
 ? ? ? ? ? ?display: inline-block;
 ? ? ? ? ? ?width: 200px;
 ? ? ? ? ? ?height: 200px;
 ? ? ? ? ? ?background-color: pink;
 ? ? ? ? ? ?padding: 10px;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div></div>
 ? ?<script>
 ? ? ? ?//会在窗口尺寸改变的时候触发事件
 ? ? ? ?window.addEventListener('resize', function () {
 ? ? ? ? ? ?console.log(1);//执行代码
 ? ? ?  })
 ? ? ? ?//检测屏幕宽度
 ? ? ? ?const div=document.querySelector('div')
 ? ? ? ?console.log(div.clientWidth);
 ? ?</script>
</body>
?
</html>
3.8 元素尺寸与位置

  • 获取宽高

获取元素自身的宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHight

总结：得到元素内容+padding+border的宽高

  • 获取位置

1.获取元素距离自己定位父级元素的左、上距离

offsetLefth和offsetTop注意是只读属性

总结：以带有定位的父级位置为准，如果没有则以 文档左上角 为准

2.element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

总结：

属性作用说明
scrollLeft和scrollTop被卷去的头部和左侧配合页面滚动来用，可读写
clientWidth和clientHeight获得元素宽度和高度不包含border,margin,滚动条 用于js获取元素大小，只读属性
offsetWidth和offsetHeight获得元素宽度和高度包含border,padding,滚动条等，只读
offsetLeft和offsetTop获取元素距离自己定位父元素的左、上距离获取元素位置的时候使用，只读属性

文章来源:https://blog.csdn.net/2301_76534754/article/details/135229796
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。