JavaScript 事件处理：优雅统一控制多个事件的只读状态-html教程-PHP中文网

JavaScript 事件处理：优雅统一控制多个事件的只读状态

本教程探讨如何在javascript事件处理中优化重复的条件判断代码，特别是当需要通过一个全局标志（如`readonly`）统一控制多个事件的启用与禁用时。我们将介绍两种核心策略：通过高阶函数封装事件逻辑，以及利用集中式事件分发器进行统一管理，旨在提升代码的可读性、可维护性和执行效率。

在前端开发中，我们经常会遇到需要对多个事件处理函数进行统一控制的场景，例如当页面进入“只读”模式时，所有交互事件都应该被禁用。然而，如果每个事件处理函数都包含重复的条件判断逻辑，代码就会变得冗余且难以维护。

问题描述：重复的条件判断

考虑以下场景，一个组件内有多个可点击元素，每个元素都绑定了一个事件。为了实现“只读”功能，每个事件函数内部都需要检查一个readOnly标志：

<div>
  <div onclick="event1()" />
  <div onclick="event2()" />
  <div onclick="event3()" />
</div>

登录后复制

let readOnly = false; // 假设这是一个全局状态

const event1 = () => {
    if (!readOnly) {
        // 执行 event1 逻辑
        console.log("执行事件1");
    }
}

const event2 = () => {
    if (!readOnly) {
        // 执行 event2 逻辑
        console.log("执行事件2");
    }
}

const event3 = () => {
    if (!readOnly) {
        // 执行 event3 逻辑
        console.log("执行事件3");
    }
}

登录后复制

这种模式会导致以下问题：

代码重复（DRY原则的违反）：if (!readOnly) 检查在每个事件函数中都重复出现。
维护困难：如果readOnly的判断逻辑需要修改，必须同步修改所有相关的事件函数。
可读性差：业务逻辑被控制逻辑所干扰。

为了解决这些问题，我们可以采用一些设计模式和技巧来优化代码结构。

立即学习“Java免费学习笔记（深入）”；

优化方案一：高阶函数封装

一种常见的优化方法是使用高阶函数（Higher-Order Function）来封装只读判断逻辑。我们创建一个通用函数，它接收一个实际的事件处理逻辑作为参数，并在执行前进行只读状态检查。

let readOnly = false; // 假设这是一个全局状态

/**
 * @param {Function} action - 实际要执行的事件逻辑函数
 * @returns {Function} - 封装后的事件处理函数
 */
const doWhenNotReadOnly = (action) => {
    return () => { // 返回一个新的函数作为事件处理器
        if (readOnly) {
            console.log("当前处于只读模式，操作被阻止。");
            return;
        }
        action(); // 执行实际的事件逻辑
    };
};

// 纯粹的业务逻辑函数，不包含只读判断
const event1Logic = () => {
    console.log("执行事件1的业务逻辑");
    // ... 实际的业务逻辑
};

const event2Logic = () => {
    console.log("执行事件2的业务逻辑");
    // ... 实际的业务逻辑
};

const event3Logic = () => {
    console.log("执行事件3的业务逻辑");
    // ... 实际的业务逻辑
};

登录后复制

HTML中调用时，需要注意 onclick 属性通常直接接受一个函数调用或表达式。如果 doWhenNotReadOnly 返回一个函数，我们可以这样使用：

<style>
  .event-div {
    background: lightblue;
    height: 50px;
    margin: 5px;
    border: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
</style>

<div>
  <!-- 直接调用返回的函数 -->
  <div class="event-div" onclick="doWhenNotReadOnly(event1Logic)()">点击事件1</div>
  <div class="event-div" onclick="doWhenNotReadOnly(event2Logic)()">点击事件2</div>
  <div class="event-div" onclick="doWhenNotReadOnly(event3Logic)()">点击事件3</div>
</div>

<script>
  // 为了在浏览器中测试，这里将 readOnly 设为 true 或 false
  // readOnly = true; // 尝试将此行注释或取消注释，观察效果
</script>

登录后复制

优点：

消除重复：if (!readOnly) 逻辑只存在于 doWhenNotReadOnly 函数中。
职责分离：业务逻辑函数 (eventXLogic) 变得更加纯粹，只关注自身的核心功能。
易于维护：修改只读判断逻辑只需修改一处。

优化方案二：集中式事件分发器

另一种策略是创建一个集中式的事件分发器。这个分发器接收一个事件标识符作为参数，并在内部根据这个标识符执行相应的业务逻辑，同时在执行前统一检查只读状态。这种方法类似于策略模式的简化实现。

let readOnly = false; // 假设这是一个全局状态

// 定义实际的事件操作，不包含只读判断
const eventActions = {
    1: () => {
        console.log("执行事件操作 1: 生成随机数", Math.random());
    },
    2: () => {
        alert("你点击了我！");
    },
    3: () => {
        if (confirm("要打开 https://majorflux.codehs.me 吗?")) {
            window.open("https://majorflux.codehs.me");
        }
    },
    4: () => {
        console.error("255.255.255.255.255.255 是一个无效的 IP 地址！");
    }
};

/**
 * 集中式事件分发器，在执行前检查只读状态
 * @param {number|string} eventIdentifier - 标识要执行哪个事件操作
 */
function dispatchEventIfWritable(eventIdentifier) {
    if (readOnly) {
        console.log(`当前处于只读模式，事件 ${eventIdentifier} 被阻止。`);
        return;
    }

    const action = eventActions[eventIdentifier];
    if (action && typeof action === 'function') {
        action();
    } else {
        console.warn("未知或无效的事件标识符:", eventIdentifier);
    }
}

登录后复制

HTML结构：

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

<style>
  .event-div-dispatcher {
    background: red;
    border: 2px outset green;
    width: 100%; /* 示例中原始答案的样式 */
    height: 100px;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-weight: bold;
  }
</style>

<div>
  <div class="event-div-dispatcher" onclick="dispatchEventIfWritable(1);">点击事件操作1</div>
  <div class="event-div-dispatcher" onclick="dispatchEventIfWritable(2);">点击事件操作2</div>
  <div class="event-div-dispatcher" onclick="dispatchEventIfWritable(3);">点击事件操作3</div>
  <div class="event-div-dispatcher" onclick="dispatchEventIfWritable(4);">点击事件操作4</div>
</div>

<script>
  // 为了在浏览器中测试，这里将 readOnly 设为 true 或 false
  // readOnly = true; // 尝试将此行注释或取消注释，观察效果
</script>

登录后复制

优点：

单一入口：所有事件都通过 dispatchEventIfWritable 函数处理，便于统一管理和调试。
高度集中：只读判断和事件分发逻辑都在一个地方。
易于扩展：添加新的事件只需在 eventActions 对象中增加一个键值对。使用对象映射比 switch 语句在事件数量多时更具可维护性和扩展性。

进一步思考：结合实际场景的选择与事件委托

何时选择哪种方案？

高阶函数封装 (doWhenNotReadOnly)：
- 适用于每个事件的业务逻辑相对独立，且事件处理函数已经以独立命名函数形式存在的情况。
- 代码结构清晰，每个onclick直接关联一个具体的业务逻辑函数，易于理解。
集中式事件分发器 (dispatchEventIfWritable)：
- 适用于事件数量较多，且事件逻辑可以被抽象为不同“类型”或“操作”的情况。
- 当事件的触发方式（如通过数据属性 data-event-id）可以统一处理时，结合事件委托会非常强大。
- 推荐使用对象映射（如 eventActions）而非冗长的 switch 语句，以提高可维护性和扩展性。

结合事件委托 (Event Delegation)

对于包含大量可交互元素的列表或容器，将事件监听器直接绑定到每个元素上会消耗大量内存。此时，事件委托是一个更优的选择。我们可以在父元素上只绑定一个事件监听器，然后利用事件冒泡机制判断是哪个子元素触发了事件，并执行相应的逻辑。

结合事件委托和集中式事件分发器，可以实现非常高效且可维护的事件管理：

<div id="eventContainer" style="border: 2px dashed blue; padding: 10px; margin-top: 20px;">
  <div class="event-div-dispatcher" data-event-id="1">通过委托点击事件操作1</div>
  <div class="event-div-dispatcher" data-event-id="2">通过委托点击事件操作2</div>
  <div class="event-div-dispatcher" data-event-id="3">通过委托点击事件操作3</div>
  <div class="event-div-dispatcher" data-event-id="4">通过委托点击事件操作4</div>
</div>

登录后复制

// 复用之前的 readOnly 状态和 eventActions 对象
// let readOnly = false;
// const eventActions = { ... };

document.getElementById('eventContainer').addEventListener('click', function(event) {
    if (readOnly) {
        console.log("只读模式，通过委托监听的操作被阻止。");
        return;
    }

    const target = event.target;
    // 检查点击的元素是否有 data-event-id 属性，或者其父元素有
    const eventId = target.dataset.eventId; 

    if (eventId) {
        const action = eventActions[eventId];
        if (action && typeof action === 'function') {
            action();
        } else {
            console.warn("未找到或无效的委托事件动作:", eventId);
        }
    }
});

登录后复制

在这个例子中，只在父容器上绑定了一个事件监听器。当点击子元素时，事件会冒泡到父容器，然后我们通过 event.target.dataset.eventId 获取到具体的事件标识符，并调用对应的处理函数。这样，无论有多少子元素，都只有一个事件监听器，大大提升了性能和代码整洁度。