The . click() could not serve as a function handler since it only works with Function() to be executed?

Question

I’ve been reading the documentation of jQuery because a question arose about the use of .click() and found nothing but the use of .click() with Handler Function() if in the documentation has nothing else to serve other than event handlers, why not use the .click() and perform a function by itself, without the use of function(), since it is justified to exist only with the use of function() in it?

Instead of:

<script>
<p>MEU PÊ</p>

$( "p" ).click(function() {
  $( this ).slideUp();
});
</script>

Seria:

<script>
<p>MEU PÊ</p>

$( "p" ).click() {
  $( this ).slideUp();
}
</script>

For if in the documentation itself it has no references and has no examples and the documentation itself is:

Description: Link an event handler to the Javascript event "click" or trigger this event in an element.

Answer 1

"- why not use the .click() and perform a function by itself without using Function()"

Quick response

You are wanting to "define the method" already in your own execution. That’s wrong! It wasn’t done like that and we must conform!

This form is incorrect:

$( "p" ).click() {
  $( this ).slideUp();
}

---

About the method .click()

The click() is a Javascript method for any HTMLElementObject (HTML elements), BUT its behavior is different when it is attached to a jQuery object.

• Pure Javascript:

The method .click() simulates a click on the object - as if the user were pointing the mouse and clicking. See:

document.getElementById('botao').addEventListener(
    'click',
    function(){
        document.getElementById('checkbox').click(); // <<<<
    },
    false
);

<input type="checkbox" id="checkbox">
<button type="button" id="botao">Clique aqui</button>

---

• Javascript com jQuery:

The method .click(), when on a jQuery object, catching the event click and executes a Handler (similar to a callback) which should be passed as argument. See:

function myScript(){
    alert('Executou myScript()!');
}
$('#btnClick').click(myScript);

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

<button type="button" id="btnClick">Clique!</button>

---

The way you exemplified it is "as if it were a short way" to define the Handler:

$( "p" ).click(function() {
  $( this ).slideUp();
});

You can use both ways. This suits your project. If you will use the same "function(){}" as Handler of various events, ideal is you use the first way - defining a function and later invoking it within the method .click(). But, if you are going to use this code block only once, why not put it directly into the method!? ;D

Note, too, that in this way arguments cannot be defined in the function call! If there is, you must, again, return to the block function(){ foo(arg1, arg2); }.

---

Variations

How we are talking specifically about the event click, why not comment on the various valid ways?!

• Straight into the element:

    <element onclick="myScript">
  

• In pure Javascript:

    object.onclick = function(){myScript};
  

• In pure Javascript - using the method addEventListener (does not work in Internet Explorer <= 8):

    object.addEventListener("click", myScript);
  

• Javascript with jQuery - using the method on:

    $('#id').on('click', myScript);
  

Note: in the 3 examples above, myScript is the call of the function...

Recommended reading: W3schools: onclick Event (in English)

Recommended reading: W3schools: HTML DOM click() Method (in English)

Recommended reading: jQuery . click() Documentation (in English)