jQuery中delegate()方法的用法详解

当前主流的jQuery版本中已经不再使用delegate()方法，而是使用on()方法代替。因此，在本回答中，我将讲解on()方法的用法，并附上两个具体的示例。

一、on()方法

on()方法用于绑定一个或多个事件处理函数到一个或多个元素。

语法：

$(selector).on(event,childSelector,data,function)

参数解释：

selector：必需，用于选取要绑定事件的元素；
event：必需，一个或多个事件类型，多个事件类型用空格分隔；
childSelector：可选，用于指定需要绑定事件的子元素；
data：可选，向事件处理函数传递的附加数据；
function：必需，事件触发时执行的函数。

示例1：单击按钮弹出提示框

<!DOCTYPE html>
<html>
<head>
    <title>示例1：单击按钮弹出提示框</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").on("click", function(){
                alert("Hello World!");
            });
        });
    </script>
</head>
<body>
    <button>单击我</button>
</body>
</html>

该示例中，当单击按钮时，会弹出提示框，提示框内容为“Hello World!”。

示例2：利用事件委托为新增对象添加事件

<!DOCTYPE html>
<html>
<head>
    <title>示例2：利用事件委托为新增对象添加事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("ul").on("click", "li", function(){
                $(this).toggleClass("checked");
            });

            $("#add").on("click", function(){
                $("ul").append("<li>New Item</li>");
            });
        });
    </script>
    <style>
        .checked{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="add">添加</button>
</body>
</html>

该示例中，已经存在的li元素绑定了单击事件，单击时会切换样式。同时，当单击“添加”按钮时，会新增一个li元素，该元素也会自动绑定单击事件，具有与之前li元素相同的功能。

二、注意事项

统一使用on()方法取代delegate()、live()、bind()方法；
小心与off()方法的配合使用，避免绑定和解绑定事件的死循环；
避免在同一元素上重复绑定相同事件（通常不会有太大问题，但是会降低性能）；
对比使用其它事件委托技术，选择最适合的方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中delegate()方法的用法详解 - Python技术站

jQuery中delegate()方法的用法详解

相关文章