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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。