What is the difference between calling a function and returning a function?

Asked

Viewed 79 times

3

I have, for example, a function myFunction() to be called in the element <body> when the event onbeforeunload occur:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body onbeforeunload="return myFunction()">
    <a href="https://www.w3schools.com">Click here to go to w3schools.com</a>
    <script>
        function myFunction() {
            return "Write something clever here...";
        }
    </script>
</body>
</html>

But for the function myFunction be called I need to give a return in the event attribute, because that way doesn’t work:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body onbeforeunload="myFunction()">
    <a href="https://www.w3schools.com">Click here to go to w3schools.com</a>
    <script>
        function myFunction() {
            return "Write something clever here...";
        }
    </script>
</body>
</html>

javascript

  • Why do you say it doesn’t work?

  • In the first example the beforeunload event runs already in the second no

  • It does not call the function in the second example, only if I return the function.

  • Declare the event onbeforeunload in the window object <h1 id='titulo'>Teste</h1><script>window.addEventListener('beforeunload', function (e) {document.getElementById('titulo').innerText= 'beforeunload';});</script>

  • Hello Welcome to Sopt, what I’m imagining is that you are wanting to present the data of your string somewhere, the return will return, but will not show anything on your screen because you did not give rise to it, you would have to present it somehow, like: <script>var dado = myFunction(); alert(dado);</script>

  • or: <script>var retornado = myFunction(); document.body.innerText = retornado;</script>

  • 1

    @Ivanferrer This beforeunload event is special because of the "tradition" and the sensitive context it automatically displays a confirm with the text returned by Event Handler.

  • Yes, beforeunload is an auto-envocation function that captures a return before any event is loaded. [+]

  • [+] it captures what you process within the function and requires it to have a return, so it makes no sense not to return it, but the function that is called can execute a script, or a subFuncao, does not necessarily need anything other than a return ... external.

  • When hitting a page the following example will be called: var change = true; window.onbeforeunload = function() {&#xA; if (change) {&#xA; return 'Há modificações para serem salvas. Are you sure you want to leave?';&#xA; } }

Show 5 more comments

1 answer

6

In short, it is for this specification point:

Event Handler content Attributes, when specified, must contain Valid Javascript code which, when Parsed, would match the Functionbody Production after Automatic semicolon Insertion.

That is to say:

[HTML] attributes corresponding to Event handlers, when specified, they need to contain valid Javascript code that, when analyzed, corresponds to a Functionbody production after automatic semicolon insertion.

In other words, the code you put on onbeforeunload is executed as if it were the body of a function, and that return determines what this function returns. The return value of Event Handler is used in some events to cancel the event if Handler returns false. If you return false to the unbeforeunload, Unload of the page is canceled.

The same mechanism can be used to cancel the function of an anchor (link), for example:

<a href="https://google.com" onclick="return false">Este link não funciona</a>

In the specific case of the event beforeunload, he exhibits something similar to a confirm, containing the message that is returned by Event Handler. The code that is in the question basically does this:

<body onbeforeunload="return 'Mensagem a ser exibida'">

And in the specific case of this event, who returns false to cancel Unload is the modal window of confirm, in case the user click on "cancel".

There are a few more details about this whole mechanism in my answer to the link question at the top.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.