核心概念：事件委托

在前端开发中，我们经常需要动态地添加或删除页面上的DOM元素。当这些动态元素需要交互（例如点击删除按钮）时，为每个新元素单独绑定事件监听器会带来以下问题：

1. 性能开销： 大量事件监听器会占用更多内存。
2. 代码复杂性： 每次添加新元素都需要手动绑定事件，移除元素时可能还需要解绑，增加了代码的维护难度。
3. 动态元素处理： 对于在页面加载后才生成的元素，直接绑定事件监听器是无效的，因为它们在绑定时并不存在。

事件委托（Event Delegation）是解决这些问题的有效模式。其核心思想是将事件监听器绑定到父元素上，而不是直接绑定到每个子元素。当子元素上的事件被触发时，事件会沿着DOM树向上冒泡，直到被父元素上的监听器捕获。在监听器中，我们可以通过event.target属性来判断是哪个子元素触发了事件，并据此执行相应的操作。

这种方式的优势在于：

• 只需一个监听器，大大减少了内存占用。
• 自动支持动态添加的元素，无需额外操作。
• 代码更简洁、更易于维护。

构建问卷应用的基础结构

我们将以一个简单的问卷创建应用为例，演示如何删除动态添加的选项。

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

HTML 结构 (index.html)

首先，我们需要一个基本的HTML结构，包含一个主标题、一个添加问题的按钮，以及一个用于承载所有问题和选项的容器。

    
    
    
    


    
我的问卷
    添加新问题
    

        

    

    

questionaire div是我们的核心容器，所有动态生成的问题和选项都将放置其中，这也是我们绑定事件委托的根元素。

Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

下载

CSS 样式 (style.css)

为了让页面元素更具可读性和交互性，我们添加一些基础样式，特别是为删除按钮提供视觉反馈。

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    color: #333;
}

#myText {
    margin-top: 15px;
    text-align: center;
    color: #007bff;
}

#addQuButton {
    background-color: #28a745; /* 绿色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 20px auto;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

#addQuButton:hover {
    background-color: #218838;
}

.question {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-width: 800px;
}

.question div[contenteditable="true"] {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 5px;
    border-bottom: 1px dashed #ccc;
    outline: none; /* 移除编辑时的边框 */
}

.question ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.question ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #eee;
}

.question ul li span[contenteditable="true"] {
    flex-grow: 1;
    margin-right: 10px;
    min-width: 100px;
    padding: 3px;
    border-bottom: 1px dotted #bbb;
    outline: none;
}

.question ul li input[type="checkbox"] {
    margin-right: 10px;
}

.addButton {
    background-color: #007bff; /* 蓝色 */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.addButton:hover {
    background-color: #0056b3;
}

/* 删除按钮样式 */
.remove-li {
    padding: 4px 10px;
    background-color: #dc3545; /* 红色 */
    color: white;
    cursor: pointer;
    margin-left: 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.remove-li:hover {
    background-color: #c82333;
}

JavaScript 核心逻辑

现在，我们将实现动态添加问题和选项，并重点讲解如何通过事件委托删除选项。

1. 初始化与元素创建函数

首先，获取问卷容器，并定义创建问题和选项的函数。

// 获取问卷容器，所有动态元素将在此容器内操作
const questionnaire = document.getElementById('questionaire');

// 页面加载时自动添加一个初始问题
newQuestion();

/**
 * 添加一个新的问题块到问卷容器。
 * 每个问题块包含一个可编辑的标题、一个选项列表和一个“添加选项”按钮。
 */
function newQuestion() {
    questionnaire.insertAdjacentHTML('beforeend',
        `

            
您的新问题标题
            

            添加选项
        
`);
    // 为新添加的问题自动添加一个默认选项
    const lastQuestionUl = questionnaire.querySelector("div.question:last-child ul");
    newOption(lastQuestionUl);
}

/**
 * 为指定的 ul 元素添加一个新的选项。
 * 每个选项包含一个可编辑文本、一个复选框和一个“删除”标记。
 * @param {HTMLUListElement} ulElement - 要添加选项的 ul 元素。
 */
function newOption(ulElement) {
    ulElement.insertAdjacentHTML('beforeend',
        `

            新选项
            
            X 
        
`);
}

关键点： 在newOption函数中，我们为每个选项添加了一个标签，并赋予它remove-li类。这个类名将是我们识别删除操作的关键标识。

2. 实现事件委托机制

我们将事件监听器绑定到questionnaire容器上。当容器内的任何元素被点击时，事件都会冒泡到questionnaire，然后我们根据event.target（实际点击的元素）来判断执行何种操作。

// 使用事件委托处理所有动态元素的点击事件
questionnaire.onclick = ev => {
    // 1. 处理“添加选项”按钮的点击事件
    // 判断点击的目标是否是 tagName 为 BUTTON 且 className 为 "addButton" 的元素
    if (ev.target.tagName === "BUTTON" && ev.target.className === "addButton") {
        // 找到当前“添加选项”按钮所属的问题块，并获取其 ul 元素
        const currentQuestionUl = ev.target.closest(".question").querySelector('ul');
        newOption(currentQuestionUl);
    }
    // 2. 处理“删除选项”按钮（X）的点击事件
    // 判断点击的目标是否是 className 为 "remove-li" 的元素
    else if (ev.target.className === 'remove-li') {
        // ev.target 是被点击的 'X' (span.remove-li)
        // ev.target.parentNode 是 'X' 的父元素，即整个 
 选项
        // 调用 remove() 方法将整个 
 元素从 DOM 中移除
        ev.target.parentNode.remove();
    }
};

// 为页面顶部的“添加新问题”按钮绑定事件
document.getElementById("addQuButton").onclick = newQuestion;

代码解析：

• questionnaire.onclick = ev => { ... }：这是