### jQuery - Events

Events in jQuery are slightly different than in Javascript, as shown on the previous lessons. See below a few more events and their equivalent in Javascript.

Event | Description | Event in Javascript
--- | --- | ---
click | Click an element | onclick
dbclick | Double click an element | ondbclick
mouseenter | Move the cursor over an element | onmouseover
mouseleave | Move the cursor out of an element | onmouseout
keypress and keydown | Some key is pressed | onkeypress e onkeydown
keyup | Some key is released | onkeyup
change | Something changes on a form field | onchange
focus | Some form field gets focus | onfocus
blur | Some form field loses focus | onblur
load or ready | The web page has been loaded | onload
resize | The browser window is resized | onresize
scroll | The user scrolls up or down the page | onscroll

The syntax of jQuery events:

        $("element").event(function(){

            // code to be executed when the event occurs

        });

#### The Ready event

This event is very important because many problems in web development are caused by the script trying to interact with elements that haven't been loaded yet. We can avoid it from happening by writing all the code inside the ready event.

        $(document).ready(function(){

            // Code to be executed

        });

The ready event works with every HTML element, but for the purpose explained above, we should apply it to the body element. In this case, there's an even simpler way to write it.

        $(function(){

            // Código JS / jQuery

        });

This is not very intuitive, but now we know that doing this is the same as setting the ready event to the body of the page.

#### The on() method

The on() method is an alternative way of working with events.

        $("element").on("event", function(){

            // code to be executed when the event is detected

        });

On a first glance it seems there isn't any advantage in using the on() method instead of the events directly, but this method can be very useful if we want to set multiple events at the same time. We can do this by passing an object whose properties will be events the values will be the functions.

        $("element").on({

            click: function(){
                // code to be executed on click
            },

            mouseenter: function(){
                // code to be executed on mouseenter
            },

            mouseleave: function(){
                // code to be executed on mouseleave
            }

        });

##### Challenge

See below an input field with the Id of "fullName". Right next to it there's a hidden button with the Id of "submit".

Show the submit button when some text is written inside the input field. If the text is erased, the button should be hidden again.

### Contents