jQuery delegate详解|极客教程

jQuery delegate详解

jQuery delegate() 方法用于向一个或多个元素添加事件处理程序，并处理当前或未来的匹配元素。delegate() 方法向被选元素的一个或多个子元素添加一个事件处理程序，并规定这些元素上的事件类型。

语法

$(selector).delegate(selector, event, function)

selector：必需。指定要搜索的元素。
event：必需。指定被选元素发生的一个或多个事件。
function：必需。规定当事件发生时运行的函数。

delegate() 方法的优点

使用 delegate() 方法相比使用 on() 方法有以下几个优点：

减少绑定事件的次数：当你需要为多个元素绑定相同事件处理程序时，使用 delegate() 方法可以减少绑定事件的次数。这样可以节省内存和提高性能。
动态元素支持：对于动态添加的元素，delegate() 可以直接绑定事件处理程序。而 on() 方法对于这种情况需要使用事件委托。
简洁的代码：delegate() 方法的语法相对简洁明了，更容易阅读和理解。

示例代码及运行结果

假设有以下 HTML 结构：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery delegate示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<ul id="list">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

<button id="addBtn">添加新项目</button>

<script>
    // 使用 delegate() 方法为 ul 元素下的 li 元素绑定 click 事件处理程序
     $("#list").delegate("li", "click", function(){$ (this).css("color", "red");
    });

    // 点击按钮后添加新的项目
     $("#addBtn").click(function(){$ ("#list").append("<li>新项目</li>");
    });
</script>

</body>
</html>

在这个示例中，我们为 ul 元素下的 li 元素绑定了 click 事件处理程序，当点击任意一个项目时，文本颜色会变成红色。同时，点击按钮后会动态添加一个新的项目，新添加的项目也会继承之前绑定的事件处理程序。

注意事项

在使用 delegate() 方法时，需要注意以下几点：

selector参数：selector 参数必须是已存在的父元素，不能是动态创建的元素。
元素选择：为了提高性能，selector 参数最好是最接近被绑定元素的元素，避免使用 document 或 body 等全局元素作为 selector。
事件类型：事件类型可以是多个，多个事件类型之间用空格隔开。