jQuery undelegate() 方法

jQuery 中的 undelegate() 方法用于移除使用 jQuery delegate() 方法附加的事件处理器。此方法在 jQuery 3.0 版本中已弃用。

语法

此方法接受三个可选参数，描述如下：

selector: 这是一个可选参数。它指定应从中移除事件处理器的选择器。

event: 这是一个可选参数。此参数指定要从选定元素中移除的一个或多个事件。如果要指定多个事件，事件值必须用空格分隔。

function: 这也是一个可选参数。它指定要移除的特定事件处理函数。

如果调用 undelegate() 方法时不带任何参数，则该方法将移除附加到元素的**所有**处理程序。如果要移除特定的事件处理程序，可以提供事件名称、选择器和处理函数名称的组合。

现在，让我们看一些插图来理解 undelegate() 方法的用法。

示例 1

这是一个使用 undelegate() 方法的简单示例。在这里，我们使用了 undelegate() 方法的可选参数 event。因此，该方法将移除传递给它的相应事件。在此示例中，有两个 h3 标题元素和一个按钮。当用户将鼠标悬停在文本为 "Hover me" 的 h3 元素上时，delegate() 方法会将 mouseover 事件附加到相应元素。点击给定的按钮，将移除附加的事件。

我们可以通过首先将鼠标悬停在 h3 元素上，然后点击按钮，再将鼠标悬停在另一个 h3 元素上来检查 undelegate() 方法的工作原理。悬停一个 h3 标题时，相应元素的样式会发生变化，当我们点击给定的按钮时，悬停将不会影响另一个 h3 元素。

输出

执行上述代码后，输出将是 -

当鼠标光标移到第一个 h3 元素上时，输出将是：

点击给定的按钮后，当我们将鼠标悬停在另一个 h3 元素上时，什么都不会发生，因为事件已被移除。

示例 2

这是使用 undelegate() 方法的另一个示例。在此示例中，我们使用 undelegate() 方法在事件被触发特定次数后移除事件处理程序。这里有一个 h3 标题（文本为 "Click me"），其大小最多只能增加三次。这是因为 undelegate() 函数将在触发三次后移除其 click 事件。每次点击，标题的大小将增加 10px。

输出

执行上述代码后，输出将是 -

文本为 click me 的 h3 标题最多只能点击三次。点击文本 Click me 三次后，输出将是：

Example3

在此示例中，我们使用了 undelegate() 方法的所有可选参数。这里有两个名为 the font() 和 size() 的函数，一个用于增加字体大小，另一个用于增加宽度和高度。当用户将鼠标悬停在带边框的文本上时，mouseover 事件和 size() 函数将被附加到它；当用户点击带边框的文本时，click 事件和 font() 函数将被附加到它。

在这里，我们使用 undelegate() 函数仅移除带边框文本的 mouseover 事件和 size() 函数。因此，在点击按钮后，悬停将不再影响带边框的文本，但用户仍然可以点击它来增加其字体大小。

输出

将鼠标悬停在带边框的文本上并点击它时，输出将是：

点击给定的按钮后，悬停将不再影响带边框的文本，但我们仍然可以点击它来增加字体大小。