与无法与window.onblur和onfocus一起使用的参数功能

Question

以下代码无法正常工作

window.onfocus = welcome("John Doe");
window.onblur = bye("John Doe");
function welcome(name) {
    $("p").append("Welcome back " +name+ " <br>");
}
function bye(name) {
    $("p").append("Good bye " +name+ " see you soon <br>");
}

但是，我注意到此代码适用于不采用任何参数的自定义功能。请参阅下面的代码。以下代码正在工作：

window.onfocus = welcome; //No Argument here so this code works
window.onblur = bye; //Same here... No argument for the function
function welcome(name) {
    $("p").append("Welcome back John Doe <br>");
}
function bye(name) {
    $("p").append("Good bye John Doe see you soon <br>");
}

我是JQuery和JavaScript的新手，这些东西使我感到困惑。有人可以解释一下为什么它完全不起作用。以及如何通过window和onblur方法来使自定义函数与参数一起使用。（对于我来说，工作或不工作的原因对我来说更为重要，因为我想了解机械师而不是填写语法）

Answer 1

尝试$(window).focus()和$(window).blur()事件：

$(function() {
    $(window).focus(function() {
        welcome("John Doe");
    });
    $(window).blur(function() {
        bye("John Doe");
    });
});
function welcome(name) {
    $("p").append("Welcome back John Doe <br>");
}
function bye(name) {
    $("p").append("Good bye John Doe see you soon <br>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p></p>

Answer 2

()(parenthesis) function-name之后将在将处理程序分配给事件时调用/调用该功能。

使用anonymous-function代替invoking-function并调用/在其中调用function。

在您的第二个（工作）示例中，您将函数定义（函数的主体）分配为事件操纵程序，因此在特定事件之后调用函数。

window.onfocus = function() {
  welcome("John Doe");
};
window.onblur = function() {
  bye("John Doe");
}
function welcome(name) {
  $("p").append("Welcome back " + name + " <br>");
}
function bye(name) {
  $("p").append("Good bye " + name + " see you soon <br>");
}

Answer 3

两个代码对我来说很好。尝试将jQuery代码放入身体部分。

Answer 4

您的代码工作正常。在页面上添加JavaScript文件。

window.onfocus = welcome("John Doe");
window.onblur = bye("John Doe");
function welcome(name) {
  $("p").append("Welcome back " + name + " <br>");
}
function bye(name) {
  $("p").append("Good bye " + name + " see you soon <br>");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p></p>

在JSFIDDLE上查看