在 jQuery 输入字段事件处理中链接 focus() 和 blur()？答案

【问题标题】：Chaining focus( ) and blur( ) in jQuery input field event processing?在 jQuery 输入字段事件处理中链接 focus() 和 blur()？
【发布时间】：2021-04-29 15:15:43
【问题描述】：

在 jQuery 中，我看到 blur() 像这样链接到 focus()：

$("input").focus(function(){
    $(this).css("background-color", "blue");
}).blur(function(){
    $(this).css("background-color", "red");
});

为什么在触发焦点事件后不立即执行 blur()？当 blur() 链接到 focus() 时，它直到字段失去焦点后才会执行，因为它是链接的，我认为即使输入字段尚未失去焦点，它也会在触发焦点事件后立即触发。

【问题讨论】：

这是因为您分配了在这些事件发生时运行的事件处理函数，而不是定义要立即按顺序执行的函数。另外，关于问题中的具体示例，您确实应该在CSS而不是JS中创建此效果。
@RoryMcCrossan 我认为可能是这种情况，但是当链接非事件函数时，它们总是快速连续执行。为什么它与事件处理不同？
您正在立即执行事件绑定。事件本身在触发时触发。
@freedomn-m 。谢谢！这就是我一直在寻找的答案。
@RMH 很高兴为您提供帮助，请将答案标记为已接受（点赞也不错:)）

标签： javascript jquery

【解决方案1】：

当链接非事件函数时，它们总是快速连续执行

在这种情况下，它们的函数正在立即运行，但这些函数是事件绑定，而不是事件。

所以模糊事件没有链接到focus事件，只有事件处理程序通过链接添加。

请注意，链接只允许在没有中间变量的情况下一个接一个地调用函数。您的代码与以下没有区别：

var inp = $("input");
inp.focus(function() { $(this).css("background-color", "blue"); });
inp.blur(function() { $(this).css("background-color", "red"); });

【讨论】：