modular-js-notes/events/basics.md

# DOM EVENTS

## LESSON OBJECTIVES

1. Describe what a browser event is
1. Create a click event
1. Use a named, referenced function as the click handler for the listener
1. Create a custom event

## Describe what a browser event is

Every kind of interaction in the browser is an event: clicks, mouseovers, key presses, scrolling, resizing, loading the page, and more.

When you interact with the browser it checks to see if there is a _listener_ for that interaction.

If there is a _listener_ present, the browser will try to run any _handlers_ for those interactions.

A _handler_ is just a function that runs a desired procedure.

## Create a click event

How can we set up a _click_ event?

We need:

1. An element to set it on
2. A _listener_ that listens for the event: on _which element_ should the event take place
3. A _handler_ that runs the procedure we want to have happen when the event is triggered

Make a button in the html:

```html
<button id="btn">Click me<button>
```

Grab the button in the JS (DOM element):

```javascript
const $btn = $('#btn');
```

### Event listener

Set an event listener:

Use `.on()` [.on() documentation](http://api.jquery.com/on/)

```javascript
$btn.on('click');
```

The event listener takes a string as an argument. There are just a few strings that it will recognize as valid events, and 'click' is one of them.

[List of events](https://developer.mozilla.org/en-US/docs/Web/Events)

### Event handler

Add a _function_ that runs what we want to have happen. This function is what _handles_ the event and is called an _event handler_:

```javascript
$btn.on('click', () => {
	console.log('button was clicked!!');
});
```

Notice that we have supplied a function as an argument. The jargon for using a function as an argument to another function is `callback`.

pseudo code for an event listener

```javascript
elem.on(STRING, CALLBACK);
```

### Add Text to the Page on Click

```javascript
$btn.on('click', () => {

	$('body').append("It seems as if it has been clicked!");

});
```

Create a paragraph inside the click handler:

```javascript
const $p = $('<p>').text("Here is some text!!!!!");
```

Append the paragraph to the page:

```javascript
$('body').append($p);
```


## Use a named, referenced function as the click handler for the listener

The _handler_ that we used for our click was _anonymous_. It was a function that had no name. We just told the listener to run an _anonymous_ function. We can give our function a name and thereby reuse that function with other event listeners.

Here is the pattern we have already seen:

```javascript
<button id="btn">Click for message</button>
```

```javascript
const $btn = $('#btn');

$btn.on('click', () => {
	const $p = $('<p>').text("THE EARTH IS ROUND");
	$('body').append($p);
});
```

### Named Function

We can abstract the anonymous function out and give it a name:

Separate function, not inside the listener:

```javascript
const addText = () => {
	const $p = $('<p>').text("THE EARTH IS AN OBLATE SPHEROID");
	$('body').append($p);
}
```

We can then reference it in the event Listener:

```javascript
$btn.on('click', addText);
```

With a named function, we can use the same handler for more than one DOM element.

### Referenced Function

Note that we do not invoke the function with parentheses. We do not want to invoke the function right away, we merely want to _reference_ it to be invoked when the listener runs it.

* The function should be defined before it is used in the event listener
* When the function is invoked inside the event listener **leave out the parentheses**. We do not want to invoke the function right away! We merely want to reference that function in the listener.

Here the function is invoked and will run immediately:

```javascript
$btn.on('click', addText());
```

We don't want this! We only want the function to run when the user has clicked on the button.

Complete code:

```javascript
const $btn = $('#btn');

const addText = () => {
	const $p = ('<p>').text("THE EARTH IS AN OBLATE SPHEROID");
	$('body').append($p);
}

$btn.on('click', addText);
```

Let's do something fancier, and toggle the background-color of the page using `.toggleClass()`

```javascript
const changeClass = () => {
  $('body').toggleClass('black');
}

$('#btn').on('click', changeClass);
```

CSS:

```css
.black {
  background-color: black;
}
```

### EXTRA: mouseenter and mouseleave

There is a special jQuery method for hover. We can replicate it using `.on()` by making an event for `mouseenter` and a separate event for `mouseleave`

```javascript
  $('#some-div').on('mouseenter', function() {
    $('body').css('background-color', 'red');
  });

  $('#some-div').on('mouseleave', function() {
    $('body').css('background-color', 'white');
  });
```

* How would we re-arrange this to make our anonymous functions named functions?

## Create a custom event

You can even create your own custom events

```javascript
$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );
```