> For the complete documentation index, see [llms.txt](https://maksimdan.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://maksimdan.gitbook.io/javascript/intro_to_jquery/section_2_-_events.md).

# Section 2 - Events

* document is an HTML object in javascript an is used to handle any object that contains the html document.
* Notice that it to is a selector.
  * It acts like a global object - that this can be done anywhere on the page. 
* .ready() is wait until all elements have been loaded.

```
    $(document).ready(function(){
        alert('document is ready');
    })
```

* Function is uniquely defined
* Generally done before the execution of any function since it enforces safety.
* document acts like a selector, but is more safe.
  * No difference would have been observed with 'html' as the selector. 
* Click Events

```
    $(document).ready(function(){
        $('p').click(function() {
            $('p').css('color', 'red');
        })
    })

    // clicking on any paragraph makes it red
```

* Now notice the difference here:

```
    $(document).ready(function(){
        $('p').click(function() {
            $(this).css('color', 'red');
        })
    })

    //clicking on a paragraph makes it red, uniquely
```

* This is an HTML DOM element that is returned by the function it is invoked on, in our case the paragraph on the click event.
* css invokations work exactly as any .css style pages.
* It grabs a selector, in our case 'this', then takes a property and what attributes we want to invoke on that property. Just like:

```
    p {
        color: red;
    }
```

* The double click event

```
    $(document).ready(function(){
        $('p').dblclick(function() {
            $(this).css('color', 'red');
        })
    })
```

* Hovering
  * Handled by mouseenter and mouseleave events.
  * Can handled by css alone

```
    $('li').mouseenter(function() {
        $(this).css('color', 'blue');
    })


    $('li').mouseleave(function() {
        $(this).css('color', 'black');
    })
```

* To combine and minimize both effects, we use the .hover function.

```
    $('li').hover(function() {
        $(this).css('color', 'blue');
    }, function() {
        $(this).css('color', 'black');
    })
```

* Notice that .hover is simply invoked with two arguments.
* Keyboard Events

```
    $(document).keypress(function() {
        console.log('button was pressed and possibly held');
    });
```

* This event also captures keys when held down.
* Unique keys

```
    $(document).keyup(function() {
        console.log('key pressed and released');
    });
```

* Does not capture keys held.
* Also notice that both events are fired, and one does not overwrite the other.
  * Executed in sync. Multiple events are put into a queue.
* Focus and Blur:

```
    $('input').focus(function(){
        $(this).css('border', '1px solid red');
    });

    $('input').blur(function(){
        $(this).css('border', '');
    });
```

* .focus is activates as a click event, and .blur resumes the opposite - that is, when a user clicks somewhere else.