Click! Tap! Scroll! Events and How to Handle Them

30.05.2016 |

Episode #9 of the course A quick introduction to JavaScript by Rich Armstrong

 

What fun would JavaScript be without events! These are the secret sauce of JavaScript. Clicks, hovers, scrolls, form submits—all that good stuff! There are several ways to work with events. I’ll work with a single node for now and show you two different ways of doing events. Add this JavaScript either to your console or in between your <script></script> tags:

var button = document.createElement('button');
button.innerHTML = 'Click the heck out of me';
document.body.appendChild(button);

Now, how do we know when it’s clicked? Either:

button.onclick = function (event) {
 console.log('You clicked the button', event);
};

Or:

button.addEventListener('click', function (event) {
 console.log('You clicked the button', event);
});

I like the second option, as you can’t overwrite it, and you can add multiple event listeners to a single event. Notice the event parameter. You’re gonna want to see what properties that event holds by checking it out in your console.

Can you see how we might change HTML, browser location, classes, create new elements, and so on with just a click event, for example? Let’s have some fun. Try this out—add this to existing <script></script> tags or enter it into your console:

document.addEventListener('click', function (event) {
 console.log(event.x, event.y);
 var colors = ['aquamarine', 'blueviolet', 'coral'];
 var colorIndex = Math.round(Math.random()*(colors.length-1));
 var newNode = document.createElement('div');
 newNode.style.width = Math.random()*200 + 'px';
 newNode.style.height = Math.random()*200 + 'px';
 newNode.style.position = 'absolute';
 newNode.style.left = event.x + 'px';
 newNode.style.top = event.y + 'px';
 newNode.style.backgroundColor = colors[colorIndex];
 document.body.appendChild(newNode);
});

Now, let’s see a few other event listeners!

// comment this one out after a while
document.addEventListener('mousemove', function (event) {
 console.log('mousemove', event);
});
// make your window's height really small for this one
document.addEventListener('scroll', function (event) {
 console.log('scroll', event);
});
document.getElementById('link').addEventListener('mouseover', function (event) {
 console.log('mouseover', event, event.target);
});
document.getElementById('link').addEventListener('mouseout', function (event) {
 console.log('mouseover', event, event.target);
});

Try them out, Google some more, have some fun, and do some crazy stuff with events! When you start mixing HTML manipulation, events, a bunch of logic, loops, functions, and variables together (with sexy design), you can come up with some amazing results!

Remember: Download Google Chrome for Desktop and Sublime Text 3 to make the most of these lessons. And remember to open up your JavaScript Console: Alt+Cmd+J (OS X) or Alt+Ctrl+J (Windows).

 

Recommended book

“Head First JavaScript Programming” by Eric T. Freeman and Elisabeth Robson

 

Share with friends