WebAPIs:事件流

2301_76534754

已于 2024-01-02 20:41:01 修改

阅读量2.1k

点赞数 42

文章标签： javascript 前端 html

于 2023-12-27 08:00:00 首次发布

本文链接：https://blog.csdn.net/2301_76534754/article/details/135229796

版权

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	获取元素距离自己定位父元素的左、上距离	获取元素位置的时候使用，只读属性