HTML JavaScript EVENTS

MOUSE EVENTS

We will discuss five common events that can be triggered by a mouse.

1. onclick()    —  (Demo Code here on codepen!)
2. onmousedown()  —  (Demo Code here on codepen!)
3. onmouseup()  —  (Demo Code here on codepen!)
4. onmouseover()  —  (Demo Code here on codepen!)
5. onmouseout()  —  (Demo Code here on codepen!)

The onlick() when used from inside HTML, these are called inline event handlers. For most of our past lessons we have been using the onclick(). You can set it as an attribute of any clickable HTML element that’s able to be clicked. It will then run the JavaScript in the attribute value anytime the element it is set on is clicked.

Typically, you will use it to call a function like this: <h1 onclick=”changeBackground();”>Click Me</h1>

The onmousedown() and onmoseup() event handlers are less commonly used.

onmousedown(): mouse button has been clicked down

onmouseup(): mouse button has been released

onmouseover(): start hovering over an element with your mouse

onmouseout(): move off the element that you are hovering over

Timer Events!

We will now cover four timer related events.

1. setTimeout()  — (Timer Demo 1 on Codepen) (Timer Demo 2 on Codepen)
2. clearTimeout() — (Timer Demo 2b with stop button)
3. setInterval()
4. clearInterval() — (Timer Demo 2c with clearInterval)

Timers allow us to delay the execution of some code for a specific amount of time. In JavaScript we can construct a timer with the built-in set timeout function this syntax for that looks like this:

setTimeout(aFunctionName, waitDuration)

This takes two arguments.The first argument (aFunctionName) is a function name – no arguments list/parentheses after the function name! It’s important to note here that this time we do not include the argument list, only the function name. If you included the argument list, it would try to run the code right away! Then (waitDuration), the second argument you give time in milliseconds (1000 is 1 second).

setTimeout() returns a numeric timer ID as it’s return value  – assign this to a variable:

let timerID = setTimeout(aFunctionName, waitDuration)

Stop the timer with clearTimeout() by giving it that specific timer ID:

clearTimeout(timerID); 

Any easier way to set a timer to repeat over and over again. It’s called setInterval(). It looks a lot like the set timeout function.

setInterval() will repeat the given function instead of running it once, using the given wait duration.

setInterval(aFunctionName, waitDuration)

Like setTimeout() it has a function that can stop it called clearInterval()

Like setTimeout(), setInterval() also returns a numeric ID that you can assign to a variable:

let timerID = setInterval(aFunctionName, waitDuration)

Stop the timer with clearInterval() by giving it that specific timer ID:

clearInterval(timerID);

ADDING EVENTS USING JavaScript!

Now we will discuss how to add and remove event handlers in JavaScript. So far we have been using inline event handlers such as the onClick attribute on HTML elements which works well for basic demonstrations and getting to know how events work.

We can also add event handlers with JavaScript with the built-in addEventListener() method, which is the recommended way to add events with vanilla JavaScript. The basic syntax is:

node.addEventListener(‘eventName’, functionToRun)

It has two arguments. The name of the event and the function to run for that event. It is typically used as a method on a DOM element node. Two things to note here. First the event name is like what we use for inline event handlers but without the on prefix, so instead of onClick, it would just be click. Instead of onMouseOver it would be mouseover

node.addEventListener(‘click’, functionToRun)

node.addEventListener(‘mouseover’, functionToRun)

Note: The event name does not include the ‘on‘ prefix and must be in quotes; the functionToRun must be the function name only, no argument list ()

Event listener Demo 1 – here at Codepen to view!

One advantage of addEventListener() over other ways of adding event handlers is that you can use it to add more than one handler function to the same event, on the same element. With a inline event handler you cannot do this. Just look at this example, only the first event handler is recognized. Only the text color changes not the background!

Now here is that same code with addEventListener() (On Codepen)

So another advantage is that JavaScript lets you remove event handlers as well using removeEventListener()

Notice syntax is similar:   node.removeEventListner(‘eventName’, functionToRun)

Now on this 4th Demo example, because we added removeEventListner, the background will change the first time you mouse over only!

Additional Resources:

• W3Schools – onclick, onmousedown, onmouseup, onmouseover, onmouseout
• W3Schools – Events
• JavaScript.info – Introduction to Browser Events
• MDN – Introduction to Events
• W3Schools – JavaScript Timing Events, setTimeout(), clearTimeout(), setInterval(), clearInterval()
• JavaScript.info – Scheduling: setTimeout() and setInterval()
• JavaScript.info – addEventListener()
• MDN – Introduction to Events
• MDN – addEventListener(), removeEventListener()
• MDN – for
• MDN – Array
• MDN – String
• MDN – removeChild(), insertBefore()
• MDN – Event Reference