通过立即执行匿名函数剖析事件冒泡：该JavaScript代码片段工作原理揭秘

技术文摘

2025-01-09 16:36:33 小编

在JavaScript编程中，事件冒泡是一个重要且有趣的概念，借助立即执行匿名函数，我们可以更深入地剖析它的工作原理。

立即执行匿名函数（IIFE），简单来说，就是在定义后立即执行的函数。它为我们在局部作用域内封装代码提供了便利，避免变量污染全局作用域。

下面来看一段相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="outer">
        <div id="inner">点击我</div>
    </div>
    <script>
        (function () {
            const outer = document.getElementById('outer');
            const inner = document.getElementById('inner');

            outer.addEventListener('click', function () {
                console.log('outer div 被点击');
            });

            inner.addEventListener('click', function () {
                console.log('inner div 被点击');
            });
        })();
    </script>
</body>

</html>

当我们点击 inner div 时，会发现控制台先输出 inner div 被点击，接着输出 outer div 被点击。这就是事件冒泡在起作用。

事件冒泡指的是，当一个元素上的事件被触发时，该事件会从最内层的元素开始，依次向上传播到外层元素。在这个例子中，点击 inner 元素，它的点击事件首先被触发并执行对应的回调函数，然后这个点击事件会继续向上冒泡到 outer 元素，触发 outer 元素的点击事件回调。

而立即执行匿名函数在这里起到了封装代码的作用。它创建了一个独立的作用域，将获取元素和添加事件监听器的代码封装起来，防止变量 outer 和 inner 污染全局作用域。如果没有这个立即执行匿名函数，这些变量会成为全局变量，可能会与其他代码中的变量产生冲突。

通过这个代码片段和对立即执行匿名函数与事件冒泡的结合分析，我们能更好地理解JavaScript中事件处理机制以及代码封装的重要性，这对于编写更健壮、可维护的代码有着积极意义。

TAGS: 事件冒泡 JavaScript代码立即执行匿名函数代码工作原理

万千站长工具

技术文摘

通过立即执行匿名函数剖析事件冒泡：该JavaScript代码片段工作原理揭秘

欢迎使用万千站长工具！