jQuery和JavaScript中如何高效处理多元素点击事件与状态管理

在前端页面开发中，列表项、卡片组、选项卡等多元素场景非常常见，每个元素都需要响应点击事件，同时还要记录各自的选中、展开等状态。如果直接给每个元素单独绑定事件，不仅代码冗余，还会在元素数量较多时造成明显的性能开销，合理的事件处理和状态管理方案能很好地解决这个问题。

原生JavaScript实现方案

事件委托的核心逻辑

事件委托是利用DOM的事件冒泡机制，把子元素的事件统一绑定到父容器上，通过判断触发事件的源元素来执行对应的逻辑，这样不管子元素数量多少，只需要绑定一次事件，大幅提升性能。

下面是一个列表项点击高亮的示例，通过事件委托处理所有<li>的点击事件，同时用数据属性管理选中状态：

// 获取父容器
const listContainer = document.querySelector('.list-container');
// 绑定点击事件到父容器
listContainer.addEventListener('click', function(event) {
    // 判断触发事件的元素是否是目标子元素
    const targetItem = event.target.closest('li.list-item');
    if (!targetItem) return;
    // 清空所有子元素的选中状态
    const allItems = listContainer.querySelectorAll('li.list-item');
    allItems.forEach(item => {
        item.classList.remove('active');
        item.dataset.selected = 'false';
    });
    // 设置当前点击元素的选中状态
    targetItem.classList.add('active');
    targetItem.dataset.selected = 'true';
    console.log('当前选中项的id：', targetItem.dataset.id);
});

状态管理的最佳实践

多元素的状态不建议直接存在DOM的属性中，最好维护一个独立的状态对象，DOM只负责根据状态渲染，这样状态变更的逻辑更清晰，也方便后续扩展。

优化后的状态管理示例：

// 独立的状态对象，存储所有列表项的状态
const listState = {
    items: [],
    selectedId: null
};

// 初始化状态
function initListState() {
    const items = document.querySelectorAll('li.list-item');
    listState.items = Array.from(items).map(item => {
        return {
            id: item.dataset.id,
            selected: false
        };
    });
}

// 更新状态并同步DOM
function updateItemSelected(itemId) {
    listState.items.forEach(item => {
        item.selected = item.id === itemId;
    });
    listState.selectedId = itemId;
    // 同步DOM状态
    const allItems = document.querySelectorAll('li.list-item');
    allItems.forEach(domItem => {
        const isSelected = domItem.dataset.id === itemId;
        domItem.classList.toggle('active', isSelected);
    });
}

// 初始化
initListState();
const listContainer = document.querySelector('.list-container');
listContainer.addEventListener('click', function(event) {
    const targetItem = event.target.closest('li.list-item');
    if (!targetItem) return;
    updateItemSelected(targetItem.dataset.id);
});

jQuery实现方案

on方法实现事件委托

jQuery的<code>on</code>方法原生支持事件委托，语法比原生更简洁，不需要手动判断事件源，直接指定子元素选择器即可。

对应的列表点击示例：

$(function() {
    // 事件委托绑定点击事件，第二个参数是子元素选择器
    $('.list-container').on('click', 'li.list-item', function() {
        // 清空所有选中状态
        $('.list-container li.list-item').removeClass('active');
        // 设置当前点击项状态
        $(this).addClass('active');
        const currentId = $(this).data('id');
        console.log('当前选中项id：', currentId);
    });
});

jQuery下的状态管理

jQuery同样可以结合独立状态对象管理多元素状态，也可以直接使用<code>data</code>方法存储状态，不过独立状态对象的方式更利于复杂场景的维护。

$(function() {
    const listState = {
        selectedId: null
    };
    $('.list-container').on('click', 'li.list-item', function() {
        const currentId = $(this).data('id');
        listState.selectedId = currentId;
        // 同步所有元素状态
        $('.list-container li.list-item').each(function() {
            const itemId = $(this).data('id');
            $(this).toggleClass('active', itemId === currentId);
        });
    });
});

两种方案的对比与注意事项

需要注意，事件委托的父容器必须是已经存在于DOM中的元素，如果是动态添加的父容器，需要先绑定到更上层的静态容器。另外状态管理尽量避免和DOM强耦合，独立的状态对象能让代码逻辑更清晰，后续调试和扩展也更方便。

事件委托的核心是利用事件冒泡，不需要给每个子元素单独绑定事件，在动态添加子元素的场景下，也不需要重新绑定事件，非常适合多元素交互的场景。

jQueryJavaScript多元素点击事件状态管理事件委托修改时间：2026-07-15 16:00:29