jQuery 事件委托

场景1：动态表格行操作

// 表格中有删除按钮，行是动态添加的
$('#data-table').on('click', '.delete-btn', function() {
    var $row = $(this).closest('tr');
    var id = $row.data('id');

    if (confirm('确定要删除这条记录吗？')) {
        $.ajax({
            url: '/api/delete/' + id,
            method: 'DELETE',
            success: function() {
                $row.remove();
                showMessage('删除成功');
            }
        });
    }
});

// 添加新行时不需要重新绑定事件
function addTableRow(data) {
    var html = '<tr data-id="' + data.id + '">' +
               '<td>' + data.name + '</td>' +
               '<td>' + data.email + '</td>' +
               '<td><button class="btn btn-sm btn-danger delete-btn">删除</button></td>' +
               '</tr>';
    $('#data-table tbody').append(html);
}

场景2：无限滚动列表

// 处理无限滚动加载的列表项点击
var $listContainer = $('#infinite-list');

// 委托处理所有列表项的点击
$listContainer.on('click', '.list-item', function() {
    var itemId = $(this).data('id');
    loadItemDetail(itemId);
});

// 无限滚动加载更多
var isLoading = false;
$(window).on('scroll', function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        if (!isLoading) {
            isLoading = true;
            loadMoreItems();
        }
    }
});

function loadMoreItems() {
    $.get('/api/items', {page: currentPage}, function(items) {
        items.forEach(function(item) {
            var $item = $('<div class="list-item" data-id="' + item.id + '">' +
                         item.title + '</div>');
            $listContainer.append($item);
            // 注意：不需要单独绑定事件！
        });
        isLoading = false;
        currentPage++;
    });
}

场景3：可编辑内容

// 双击编辑，点击保存
$('#editable-content').on('dblclick', '.editable', function() {
    var $element = $(this);
    var originalText = $element.text();

    // 创建输入框
    var $input = $('<input type="text" class="form-control" value="' +
                  originalText.replace(/"/g, '"') + '">');

    // 替换内容
    $element.html($input);
    $input.focus();

    // 保存编辑
    $input.on('blur keypress', function(e) {
        if (e.type === 'blur' || (e.type === 'keypress' && e.which === 13)) {
            var newText = $input.val();
            $element.text(newText);

            // 保存到服务器
            saveContent($element.data('id'), newText);
        }
    });
});

错误1：选择器过于宽泛

// 错误示例
$('body').on('click', 'div', function() {
    // 这会捕获body内所有div的点击事件，性能差且可能产生意外行为
});

// 正确做法：使用更具体的选择器
$('#specific-container').on('click', '.target-class', function() {
    // 只处理特定容器内特定类的元素
});

错误2：在事件处理器中错误使用this

// 注意：在事件委托中，this指向匹配的子元素，而不是事件绑定的父元素
$('#list').on('click', 'li', function() {
    console.log(this); // 指向被点击的li元素
    console.log($(this).text()); // 正确：获取li的文本

    // 错误：认为this指向#list
    // var listId = $(this).attr('id'); // 错误！

    // 正确获取父元素
    var $list = $(this).parent();
    var listId = $list.attr('id'); // 正确
});

错误3：委托到可能被移除的元素

// 如果父元素可能被移除，事件委托会失效
var $tempContainer = $('<div><button class="btn">点击我</button></div>');

// 委托到临时容器
$tempContainer.on('click', '.btn', function() {
    console.log('按钮被点击');
});

// 将容器添加到页面
$('body').append($tempContainer);

// 移除容器
$tempContainer.remove(); // 事件委托随之失效

// 重新添加到页面
$('body').append($tempContainer); // 按钮点击事件不会触发！

// 解决方案：委托到不会被移除的父元素
$(document).on('click', '.btn', function() {
    console.log('按钮被点击');
});

不同版本的事件委托方法

// jQuery 1.7+ 推荐使用 .on()
$(parent).on('click', childSelector, handler);

// jQuery 1.4.2+ 可以使用 .delegate() (已弃用)
$(parent).delegate(childSelector, 'click', handler);

// jQuery 1.3+ 可以使用 .live() (已弃用，性能差)
$(childSelector).live('click', handler);

// jQuery 1.0-1.2 使用 .bind() (不推荐用于委托)
$(childSelector).bind('click', handler);

// 当前最佳实践：始终使用 .on() 方法
// 它统一了所有事件绑定方法，性能最好，功能最全

注意：从jQuery 1.7开始，.on()方法是推荐的统一事件绑定API。.delegate()和.live()在jQuery 3.0中已被移除。