jQuery delegate()方法

jQuery中的delegate()方法用于在DOM元素中添加事件处理程序。与传统的事件绑定方式不同，delegate()方法可以在父元素上监听子元素上的事件，因此可以动态地添加元素并绑定事件处理程序。

语法

delegate()方法的语法如下：

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

其中，参数解释如下：

• selector: 必需。要委托的元素的父元素。
• childSelector: 必需。要监听事件的子元素，可以是任何有效的选择器。
• event: 必需。字符串，规定要往元素添加的一个或多个事件。
• data: 可选。规定传递到函数的数据。
• function: 必需。在指定的元素上发生指定的事件时运行的函数。

示例

1. 在 ul 元素添加若干个 li 子元素后，使用 delegate() 方法绑定 click 事件。

HTML 代码：

<ul id="myList">

</ul>

JavaScript 代码：

$(document).ready(function(){
    // 在 ul 元素内插入 3 个 li 元素
    $('#myList').append('<li>List Item 1</li>');
    $('#myList').append('<li>List Item 2</li>');
    $('#myList').append('<li>List Item 3</li>');

    // 绑定 click 事件
    $('#myList').delegate('li', 'click', function(){
        alert('Clicked List Item ' + $(this).text());
    });
});

在上面的例子中，我们使用了 delegate() 方法在 ul 元素上绑定了一个 click 事件监听器。我们在代码中使用 append() 方法动态添加了 3 个 list item 元素到 ul 元素中。当用户点击其中任意一个 list item 元素时，我们会弹出对应的 alert 信息。

1. 使用 delegate() 方法绑定 focus 和 blur 事件，为输入框添加 hover 样式。

HTML 代码：

<form>
    <input type="text" name="input1">
    <input type="text" name="input2">
    <input type="text" name="input3">
</form>

JavaScript 代码：

$(document).ready(function(){
    // 绑定 focus 和 blur 事件
    $('form').delegate('input[type="text"]', 'focus blur', function(){
        $(this).toggleClass('hover');
    });
});

在上面的例子中，我们使用了 delegate() 方法为 form 元素的所有文本输入框添加了 focus 和 blur 事件监听器。当文本框被 focus 或 blur 时，我们通过 toggleClass() 方法切换对应的 hover 样式类。这样，当鼠标悬浮在文本框上方时，文本框会呈现出类似于 hover 样式的效果。