Web APIs 核心知识（3）

最新推荐文章于 2024-09-24 21:17:34 发布

你心里

最新推荐文章于 2024-09-24 21:17:34 发布

阅读量1k

点赞数 33

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_43733543/article/details/139272195

版权

JavaScript事件机制详解

在Web开发中，事件机制是一个重要的概念，它让页面与用户的交互变得更加生动和灵活。本篇博客将详细介绍JavaScript中的事件流、事件委托以及其他常见的事件，帮助大家更好地理解和应用这些知识。

1. 事件流

事件流指的是当一个事件发生时，它在DOM中的传播过程。事件流主要包括三个阶段：捕获阶段、目标阶段和冒泡阶段。
在这里插入图片描述

1.1 捕获和冒泡

捕获阶段

捕获阶段从文档的根节点开始，向事件目标节点传播。在这个阶段，事件沿着DOM树向下传播，直到到达事件目标节点。

冒泡阶段

冒泡阶段从事件目标节点开始，向文档的根节点传播。在这个阶段，事件沿着DOM树向上传播，直到到达文档的根节点。

示例

下面的代码演示了捕获和冒泡阶段的事件传播过程：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Flow</title>
</head>
<body>
    <div id="parent" style="padding: 20px; background-color: lightgray;">
        Parent
        <div id="child" style="padding: 20px; background-color: lightcoral;">
            Child
        </div>
    </div>
    <script>
        document.getElementById('parent').addEventListener('click', function(event) {
            console.log('Parent clicked - Capturing');
        }, true); // true indicates capturing phase

        document.getElementById('child').addEventListener('click', function(event) {
            console.log('Child clicked - Capturing');
        }, true);

        document.getElementById('child').addEventListener('click', function(event) {
            console.log('Child clicked - Bubbling');
        });

        document.getElementById('parent').addEventListener('click', function(event) {
            console.log('Parent clicked - Bubbling');
        });
    </script>
</body>
</html>

在这个例子中，当点击child元素时，捕获阶段的事件处理器会先触发，然后是目标阶段，最后是冒泡阶段的事件处理器。输出结果将会是：

Parent clicked - Capturing
Child clicked - Capturing
Child clicked - Bubbling
Parent clicked - Bubbling

1.2 阻止冒泡

有时我们需要阻止事件的冒泡，可以使用event.stopPropagation()方法来实现。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stop Propagation</title>
</head>
<body>
    <div id="parent" style="padding: 20px; background-color: lightgray;">
        Parent
        <div id="child" style="padding: 20px; background-color: lightcoral;">
            Child
        </div>
    </div>
    <script>
        document.getElementById('parent').addEventListener('click', function(event) {
            console.log('Parent clicked');
        });

        document.getElementById('child').addEventListener('click', function(event) {
            event.stopPropagation();
            console.log('Child clicked');
        });
    </script>
</body>
</html>

在这个例子中，当点击child元素时，Parent clicked不会被打印，因为事件冒泡被阻止了。输出结果将会是：

Child clicked

在这里插入图片描述

2. 事件委托

事件委托是一种将事件处理程序添加到父元素，而不是每个子元素上的技术。利用事件冒泡，可以使事件处理更加高效，特别是在动态添加子元素时。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Delegation</title>
</head>
<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <script>
        document.getElementById('list').addEventListener('click', function(event) {
            if (event.target && event.target.nodeName === 'LI') {
                console.log('List item clicked: ' + event.target.textContent);
            }
        });
    </script>
</body>
</html>

在这个例子中，我们在ul元素上添加了一个事件处理程序，而不是在每个li元素上。这样，当点击任何li元素时，事件处理程序都会被触发。输出结果将会是：

List item clicked: Item 1
List item clicked: Item 2
List item clicked: Item 3

3. 其他事件

3.1 页面加载事件

页面加载事件在页面及其所有资源（如图像、脚本等）完全加载后触发。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page Load Event</title>
</head>
<body>
    <script>
        window.addEventListener('load', function() {
            console.log('Page fully loaded');
        });
    </script>
</body>
</html>

在这个例子中，当页面及其所有资源完全加载后，控制台会打印Page fully loaded。
其他DOM元素也能绑定此事件。

3.2 元素滚动事件

滚动事件在元素的滚动条位置发生变化时触发。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scroll Event</title>
    <style>
        #scrollable {
            width: 300px;
            height: 100px;
            overflow: auto;
            background-color: lightblue;
        }
        #content {
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="scrollable">
        <div id="content">Scrollable Content</div>
    </div>
    <script>
        document.getElementById('scrollable').addEventListener('scroll', function() {
            console.log('Element scrolled');
        });
    </script>
</body>
</html>

在这个例子中，当滚动scrollable元素时，控制台会打印Element scrolled。

3.3 页面尺寸事件

页面尺寸事件在浏览器窗口大小发生变化时触发。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resize Event</title>
</head>
<body>
    <script>
        window.addEventListener('resize', function() {
            console.log('Window resized');
        });
    </script>
</body>
</html>

在这个例子中，当调整浏览器窗口大小时，控制台会打印Window resized。

4. 元素尺寸与位置

JavaScript提供了一些属性和方法来获取和设置元素的尺寸和位置。

获取元素尺寸

element.offsetWidth 和 element.offsetHeight 返回元素的布局宽度和高度（包括边框和内边距）。
element.clientWidth 和 element.clientHeight 返回元素的内容宽度和高度（包括内边距，但不包括边框和滚动条）。

获取元素位置

element.offsetLeft 和 element.offsetTop 返回元素相对于其最近的定位祖先元素的左上角位置。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element Size and Position</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 5px solid black;
            margin: 20px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div id="box">Box</div>
    <script>
        let box = document.getElementById('box');
        console.log('Offset Width:', box.offsetWidth); // 130 (100 + 2*10 + 2*5)
        console.log('Offset Height:', box.offsetHeight); // 130
        console.log('Client Width:', box.clientWidth); // 120 (100 + 2*10)
        console.log('Client Height:', box.clientHeight); // 120
        console.log('Offset Left:', box.offsetLeft); // Position relative to its offset parent
        console.log('Offset Top:', box.offsetTop); // Position relative to its offset parent
    </script>
</body>
</html>