JavaScript嵌套eventListener是否为不良实践？模态框实现优化咨询

DevOps 小满

2026-7-27

问题描述

我需要实现点击「Add Exercise」按钮时弹出模态框，模态框初始显示运动类别列表；用户选择特定类别后，在同一模态框中显示该类别下的运动列表。后端控制器返回Map<String, List>格式的响应数据。现咨询以下问题：

是否有无需嵌套多层eventListener的更优实现方式？
在JavaScript中嵌套eventListener是否属于不良实践？

现有代码

HTML代码

<button id="open-modal" type="button">Add Exercise</button> 
<div id="exerciseLog"></div>
<div id="whole-modal-window">
    <div id="addExerciseModal" class="modal">
        <div id="modalContent">
            <div id="modalHeader">
                <span class="close-modal">&times;</span>
                <h2 id="modalHeaderText"></h2>
            </div>
            <div id="categoryModalBody">
            </div>
            <div id="exerciseModalBody">
            </div>
        </div>
    </div>
</div>

JavaScript代码

let modal = document.getElementById("whole-modal-window");
let openModal = document.getElementById("open-modal");
let categoryContainer = document.getElementById("categoryModalBody");
let exerciseContainer = document.getElementById("exerciseModalBody");
let modalHeaderText = document.getElementById("modalHeaderText");
let exerciseLog=document.getElementById("exerciseLog");
let closeModal = document.querySelector(".close-modal");

  openModal.addEventListener('click', function () {
      event.preventDefault();
      modal.style.display = 'block';
      categoryContainer.innerHTML="";
      exerciseContainer.innerHTML="";//or try giving exerciseContainer.style.display='none';
      categoryContainer.style.display='block';
      modalHeaderText.innerHTML='Select Exercise';

            //make AJAX call to workout Controller to get the list of exercisecategory,the controller returns a Map(key being category and the value being the exercise list)

      $.ajax({

          url: "getExerciseCategories",
          method: "GET",
          success: function (response) {


          Object.keys(response).forEach(function (category) {
              var categoryLink = document.createElement("a");
              categoryLink.href = "#";
              categoryLink.innerHTML = category;


              //add event listener to the link to display exercises under that category
              categoryLink.addEventListener('click', function (event) {
                  event.preventDefault();
                  console.log("Inside exercise list");
                  categoryContainer.style.display = 'none';
                  exerciseContainer.style.display = 'block';
                  modalHeaderText.innerText = category;

                  //display exercises for clicked category
                  response[category].forEach(function (exercise) {

                      var exerciseLink = document.createElement("a");
                      exerciseLink.href = "#";
                      exerciseLink.innerHTML = exercise;


                      exerciseLink.addEventListener('click',function(event,exercise){
                          event.preventDefault();
                          let exerciseName=document.createElement("h2");
                          exerciseName.innerText=exercise;
                          exerciseLog.appendChild(exerciseName);
                          modal.style.display = 'none';

                      });
                      exerciseContainer.appendChild(exerciseLink);
                      exerciseContainer.appendChild(document.createElement("br"));


                  });


              });
              categoryContainer.appendChild(categoryLink);
              categoryContainer.appendChild(document.createElement("br"));

          });

      },

      error: function (xhr, status, error) {

      }

  }
  );


});

closeModal.addEventListener('click', function () {

    modal.style.display = 'none';
});

window.addEventListener('click', function (e) {
    if (e.target == modal) {
        modal.style.display = 'none';
    }
});

问题解答

1. 嵌套`eventListener`是否属于不良实践？

是的，嵌套事件监听属于需要尽量规避的不良实践，核心问题包括：

可读性与维护性差：多层嵌套会让代码逻辑层级混乱，后续排查问题或修改功能时，很难快速梳理事件触发的先后关系。
内存泄漏风险：动态创建的元素绑定的监听如果没有被正确移除，容易造成内存泄漏；嵌套创建的监听更难追踪和清理。
逻辑耦合严重：元素创建、数据处理、事件响应的逻辑绑定在一起，无法单独复用某一部分功能。

2. 无需嵌套多层`eventListener`的更优实现方式

推荐使用事件委托（利用事件冒泡机制，在父级元素或根元素上绑定一次监听，处理所有子元素的点击事件），同时将代码按功能拆分独立函数，实现数据与视图分离。

重构后的代码

JavaScript代码

const modal = document.getElementById("whole-modal-window");
const openModalBtn = document.getElementById("open-modal");
const categoryContainer = document.getElementById("categoryModalBody");
const exerciseContainer = document.getElementById("exerciseModalBody");
const modalHeaderText = document.getElementById("modalHeaderText");
const exerciseLog = document.getElementById("exerciseLog");
const closeModalBtn = document.querySelector(".close-modal");

// 存储后端返回的运动分类数据
let exerciseData = {};

// 打开模态框并加载分类数据
openModalBtn.addEventListener('click', (e) => {
    e.preventDefault();
    modal.style.display = 'block';
    resetModalState();
    loadExerciseCategories();
});

// 关闭模态框
closeModalBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

// 点击模态框外部关闭
window.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});

// 事件委托：统一处理分类和运动项的点击
document.addEventListener('click', (e) => {
    const target = e.target;
    // 处理分类项点击
    if (target.classList.contains('category-link')) {
        e.preventDefault();
        const category = target.dataset.category;
        renderExerciseList(category);
    }
    // 处理运动项点击
    else if (target.classList.contains('exercise-link')) {
        e.preventDefault();
        const exercise = target.dataset.exercise;
        addExerciseToLog(exercise);
        modal.style.display = 'none';
    }
});

// 重置模态框初始状态
function resetModalState() {
    categoryContainer.innerHTML = "";
    exerciseContainer.innerHTML = "";
    categoryContainer.style.display = 'block';
    exerciseContainer.style.display = 'none';
    modalHeaderText.textContent = '选择运动类别';
}

// 从后端加载运动分类数据
function loadExerciseCategories() {
    $.ajax({
        url: "getExerciseCategories",
        method: "GET",
        success: (response) => {
            exerciseData = response;
            renderCategoryList(response);
        },
        error: (xhr, status, error) => {
            console.error('加载运动分类失败:', error);
        }
    });
}

// 渲染运动分类列表
function renderCategoryList(categories) {
    Object.keys(categories).forEach(category => {
        const categoryLink = document.createElement('a');
        categoryLink.href = '#';
        categoryLink.className = 'category-link';
        categoryLink.dataset.category = category;
        categoryLink.textContent = category;
        
        categoryContainer.appendChild(categoryLink);
        categoryContainer.appendChild(document.createElement('br'));
    });
}

// 渲染指定分类下的运动列表
function renderExerciseList(category) {
    categoryContainer.style.display = 'none';
    exerciseContainer.style.display = 'block';
    modalHeaderText.textContent = category;
    
    exerciseData[category].forEach(exercise => {
        const exerciseLink = document.createElement('a');
        exerciseLink.href = '#';
        exerciseLink.className = 'exercise-link';
        exerciseLink.dataset.exercise = exercise;
        exerciseLink.textContent = exercise;
        
        exerciseContainer.appendChild(exerciseLink);
        exerciseContainer.appendChild(document.createElement('br'));
    });
}

// 将选中的运动添加到日志
function addExerciseToLog(exercise) {
    const exerciseName = document.createElement('h2');
    exerciseName.textContent = exercise;
    exerciseLog.appendChild(exerciseName);
}

优势说明

事件委托：仅在document上绑定一次点击监听，处理所有分类和运动项的点击，彻底避免嵌套监听。
逻辑拆分：将重置模态框、加载数据、渲染视图等功能拆分为独立函数，代码结构清晰，便于维护和复用。
数据与视图分离：先存储后端返回的数据，再根据数据渲染对应视图，逻辑更直观。
减少内存泄漏风险：动态元素无需单独绑定监听，降低了内存泄漏的可能性。

内容的提问来源于stack exchange，提问作者RulesofGames

JavaScript嵌套eventListener是否为不良实践？模态框实现优化咨询

现有代码 #

HTML代码 #

JavaScript代码 #

1. 嵌套eventListener是否属于不良实践？ #

2. 无需嵌套多层eventListener的更优实现方式 #

重构后的代码 #

JavaScript代码

优势说明

现有代码

HTML代码

JavaScript代码

1. 嵌套`eventListener`是否属于不良实践？

2. 无需嵌套多层`eventListener`的更优实现方式

重构后的代码