###1. JavaScript Events
###2. Learning Objective(s)
- Understand the role of events
- Recognize and respond to common types of events
- load
- click
- mouseover
- mouseout
- keydown
- focus
- blur
- submit
###3. Essential Question(s) What an event is, how to pass a function to it.
###Events are things that happen to a page!
One of the most common events that we'll use will be load which is what happens when a document or window loads
lets take a look at how this can affect things create a new folder somewhere, and make sure it has this structure
├── index.html
└── js
└── main.js
1 directory, 2 files
and paste this into our index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/main.js"></script>
<title>JS Test</title>
</head>
<body>
<h1 id="main_heading">Hello world</h1>
</body>
</html>
and this into our main.js
var string = document.getElementById('main_heading');
console.log(string.innerHTML);
If you're like me we should have null in our console when we open up index.html but try pasting this code into the console and it will work fine.
Can Anyone hazard a guess why?
So how could we refactor this code so it only runs when the window loads?
Window.onload vs Document.onload
I want you guys to get into the habit of undertangind which loads first and structuring things accordingly
###Add event Listener
addEventListener(event, function(){
});
An event listener listens for an event
###Click event lets mess around with some click events, add this to your html page.
and paste this into the body of our index.html below the <h1>
<p id="color_change">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
And lets add this into our js
var paragraph = document.getElementById('color_change');
paragraph.addEventListener("click", function() {
paragraph.style.backgroundColor = "yellow";
});###mouseover and mouseout Another event that we can use to make our pages super dynamic and responsive is by binding something to mouseover
lets add an image tag with the id of "blart" to our body and follow along here.
###Keydown event
Ok now that we've got click events, mouse over events it seems like the next logical step is going to be keyboard events.
In JS these are called keydown events
Put this in our js file and see what happens
window.onkeydown = function(event){
alert(event.keyCode);
}Notice we use a little different syntax here, onkeydown is a shortcut method that this object has and were binding that to a function that we've created.
There are shortcut methods for a lot of these but not all.
Keycodes are different from ASCII characters, heres a link to find out which ones correspond to which
link
We can then check if the keycode we received is equal to something and then execute a function.
Lets add an event that only executes if the user presses SHIft + R
###Focus and Blur
Focus is when an element is selected, blur is when it is deselected
Lets add a couple inputs to our page and check out applying these properties.
###preventing default
Certain keys have default actions, a lot of the function keys do for example. What if we want to prevent the default behavior ? Call event.preventDefault() right after the event
###Putting this all together
Lets go through making megaman move.
Go to your repo that has all the class stuff and pull, then copy the folder /templates/megamanto to your workind directory.
You should have this structure
.
├── css
│ └── style.css
├── images
│ └── megaman.jpg
├── index.html
└── js
└── megaman.js
3 directories, 4 files
Lets open up index.html WHOA wtf is happening, how is megaman moving?! I'll give you guys some time to go thru this code and figure out what is going on
And then lets make megaman move.