jQuery off() 方法

jQuery 中的 off() 方法用于移除使用 jQuery on() 方法 附加的事件处理程序。建议使用此方法，因为它简化了 jQuery 代码库。off() 方法取代了 undelegate()、unbind() 和 die() 方法。

语法

此方法接受四个参数，其中一个参数是强制性的，其他参数是可选的。off() 方法的参数值定义如下。

event： 这是强制性参数。此参数指定要从选定元素中删除的一个或多个事件或命名空间。如果必须指定多个事件，则事件值必须用空格分隔。

selector： 这是可选参数。它应与最初在附加事件处理程序时传递给 .on() 方法的参数匹配。

function(eventObj)： 这也是可选参数。它是事件触发时运行的函数。

map： 这是事件映射。

我们也可以不使用任何参数来使用 off() 方法。如果它不带任何参数调用，该方法将删除附加到元素的所有处理程序。如果必须删除特定的事件处理程序，我们可以提供事件名称、选择器、处理程序函数名称或命名空间的组合。

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

示例 1

在此示例中，有两个 h3 标题元素和一个按钮。我们必须将鼠标悬停在带有文本 Hover me 的元素上，以便将 mouseover 事件附加到它们。该按钮将删除附加到 h3 元素的事件。

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

输出

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

将鼠标悬停在第一个 h3 元素上时，输出将是 -

单击给定按钮后，当我们悬停第二个 h3 元素时，什么也不会发生，因为事件已被移除。

示例 2

在此示例中，我们使用 off() 方法在事件触发一定次数后移除事件处理程序。这里，有一个 h3 标题，其大小只能增加三次。这是因为 off() 函数在触发三次后将移除其 click 事件。每次点击，标题的大小将增加 4.5px。

输出

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

带有文本 click me 的标题 h3 只能点击三次。点击文本 Click me 三次后，输出将是 -