DOM元素部分属性和事件监听以及案例分析_ant-design 监听元素dom渲染事件-CSDN博客

本文链接：https://blog.csdn.net/hole_diss/article/details/143663390

文章目录

一、属性含义
二、DOM监听事件
三、滚动条位置识别
- 3.1 展示元素到可视区域: scrollIntoView
- 3.2 案例

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象。
clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop属性归纳

一、属性含义

height：元素设置的高度

1.1 clientHeight

clientHeight === height + paddingTop + paddingBottom

可视区域的高度，处于定值状态

1.2 offsetHeight

offsetHeight === height + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth
或者：offsetHeight === clientHeight + borderTopWidth + borderBottomWidth
总高度包括滚动条和边框，处于定值状态

1.3 scrollHeight

含义：产生滚动条以后，包括滚动距离在内的总高度，处于定值状态
如果没有滚动条，scrollHeight === clientHeight

1.4 scrollTop

含义：滚动条已经滚动的距离；
或者说元素可见区域顶部距离元素起始位置的距离
或者说元素顶部被截掉隐藏的部分的高度

1.5 offsetTop

距离最近的定位父级元素的距离（元素顶部开始算）

1.6 scrollTo

含义：具有滚动条的元素，设置滚动距离，x表示横轴，y表示纵轴；contentDom.scrollTo(x, y);

1.7 scrollBy

含义：具有滚动条的元素，在当前的滚动距离基础上，设置滚动距离增量（或负值），x表示横轴，y表示纵轴；contentDom.scrollBy(x, y);

1.8 window.innerHeight

当前页面区域的浏览器容器高度

1.9 window.outerHeight

当前页面区域的浏览器容器高度 + 浏览器书签栏高度 +搜索栏 + tabs按钮层高度 = 整个浏览器的高度（当你调整浏览器高度的时候，获取到的值会更新）

二、DOM监听事件

2.1 监听方式

<!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>
    <button class="btn" onclick="alert(1)">btn1</button>
    <button class="btn">btn2</button>
    <button class="btn">btn3</button>
</body>
<script>
    const btnList = document.getElementsByClassName('btn');
    // 方式2 同一种事件，只能注册一次onclick回调函数，多次注册会被覆盖
    btnList[1].onclick = function () {
        alert(2)
    }
    // 方式2 同一种事件，可以绑定多个回调
    btnList[2].addEventListener('click', function () {
        alert(3)
    })
</script>
</html>

2.2 addEventListener

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);
const options = {
	capture: false, // 是否在捕获阶段触发（在子元素冒泡前执行）
	once: false, // 是否只执行一次
	passive: false, // 表示listener不会调用preventDefault()
	signal: false, // 移除监听器
}
// 是否在捕获阶段触发（在子元素冒泡前执行）
useCapture： false

2.3 AbortController

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

const controller = new AbortController();
content.addEventListener('scroll', function(){}, { signal: controller.signal })
// abort 将停止 content元素的scroll事件
controller.abort()

三、滚动条位置识别

3.1 展示元素到可视区域: scrollIntoView

content.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" })
// smooth 流畅；instant 立刻滑动结束
behavior = 'smooth' | 'instant'
// block：垂直方向的对齐;滚动后，起始点或者终止点对齐；
// block: "start"会让元素顶部刚好出现在容器顶部；
// block: "end"会让元素底部刚好出现在容器底部；
// inline: 水平方向的对齐；

3.2 案例

滚动到某个元素位置
获取当前页面中点是哪一个元素，可用于目录索引的确定

<!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>
        body {
            overflow: hidden;
            padding: 10px 0;
        }
        .content {
            overflow-y: scroll;
            height: 600px;
            border: 1px solid #3f25b6;
            padding: 10px 0 20px 0;
            border-top-width: 10px;
            border-bottom-width: 30px;
            background-color: #8579b9;
        }
        .content .item {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 22px;
            font-weight: 600;
            color: blueviolet;
            border: 1px solid pink;
            background-color: #fff;
        }
        .btn {
            position: fixed;
            right: 100px;
            top: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
            height: 40px;
            font-size: 18px;
            color: #fff;
            background-color: aqua;
            border: initial;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>

    </div>
    <button class="btn item-scrollIntoView-btn">item-scrollIntoView-btn</button>
    <button class="btn signal-stop" style="top: 200px;">signal-stop</button>
    <button class="btn item-key" style="top: 300px;"></button>
</body>
<script>
    // 放在body下方获取dom
    const content = document.getElementsByClassName('content')[0];
    window.contentDom = content; // 方便在控制台操作
    const itemAll = document.getElementsByClassName('item');
    const itemTarget = itemAll[2];
    const scrollIntoViewBtn = 
    document.getElementsByClassName('item-scrollIntoView-btn')[0];
    const signalStopBtn = document.getElementsByClassName('signal-stop')[0];
    const itemKeyBtn = document.getElementsByClassName('item-key')[0];

    scrollIntoViewBtn.addEventListener('click', function(){
        // block：滚动后，起始点或者终止点对齐；
        // 比如block: "start"会让元素顶部刚好出现在容器顶部，
        // block: "end"会让元素底部刚好出现在容器底部
        itemTarget.scrollIntoView({ block: "start", behavior: "smooth", inline: "start" })
    })
    const controller = new AbortController();
    function setItemKeyBtn(key) {
        itemKeyBtn.innerHTML = key
    }
    

    // 滚动事件
    function contentScroll() {
        let key = '';
        Array.from(itemAll).forEach((item) => {
            if(content.scrollTop + 0.5 * content.clientHeight 
            >= item.offsetTop + 0.5 * item.clientHeight) {
                key = item.innerHTML
            }
        })
        setItemKeyBtn(key)
        return key
    }
    content.addEventListener('scroll', contentScroll, { signal: controller.signal })
    signalStopBtn.addEventListener('click', function(){
        controller.abort()
    })

    // 初始化
    contentScroll()

	// 打印区
    // height === 600
    // paddingTop = 10; paddingBottom === 20
    // borderTopWidth = 10; borderBottomWidth === 30
    console.log('contentDom.clientHeight', contentDom.clientHeight); // 630
    console.log('contentDom.offsetHeight', contentDom.offsetHeight); // 670
    console.log('contentDom.scrollHeight', contentDom.scrollHeight); // 1540

	console.log('window.innerHeight', window.innerHeight); // 高度不一定，跟实际高度有关
	console.log('window.outerHeight', window.outerHeight); // 高度不一定，跟实际高度有关
</script>
</html>