Mouse Events

How events work

• Create a function that runs some code
• Find an element on your page
• Run the function when something happens to the element

Step One:
Create a function

In site-script.js create a new function:

function makeLionRoar() {
  console.log('Raaaaahr!');
}

You need:

• the key word function
• a name for it like makeLionRoar,
• some lines of code { in between curly brackets }.

Step Two:
Find an element

We already know how to do that!

function makeLionRoar() {
  console.log('Raaaaahr!');
}

var lionBox = document.getElementById('lion-box');

Step Three:
Run the function when an event happens

function makeLionRoar() {
  console.log('Raaaaahr!');
}

var lionBox = document.getElementById('lion-box');

lionBox.addEventListener('click', makeLionRoar);

When I click my lion, the console says “Raaaahr!”.

Challenge: Change “Lion” to “Raaaahr!”

Add more lines of code inside the function so that when you
click the “lion” box, its innerHTML changes to “Raaaahr!”

When I click the “lion” box, it changes to “Raaaahr!”.

Why use a function?

A function lets us wrap up several lines of code under one
single name, so we can easily run it as many times as we like.

Mouse Over Events

In your code, add another function and another event listener:

function makeLionMeow() {
  lionBox.innerHTML = 'Meow!';
}

lionBox.addEventListener('mouseover', makeLionMeow);

When I mouse-over “lion”, it says “meow”;

Challenge: Make Lion Relax

In your code, add another function and another event listener
so that when you mouseout the text changes back to lion.

What we learned

• Writing a function
• Adding an event listener
• Click events
• Mouse over events