Tutorial: JavaScript Events

JavaScript events are just about anything that happens when your user opens up the page. In JavaScript, you can define what actions you want to occur based on the event, like on the event of clicking an image you want some information to pop up. So onClick, create an alert box to say a message.

As this is a lecture/lab, you will need to create a starting page. For right now, you will need a graphics software like Adobe's Photoshop or the free https://www.getpaint.net/ to create images. Don't forget to Save For Web either using the software's legacy or an online program like Tiny PNG

To begin, create or save 9 .gifs or .pngs, optimized, 100px square. Reference your images in your html page, as list items. Don't forget to add the appropriate alt attributes. Here is what my code looks like:


unordered list with image tags

And here is its CSS:

code view of unordered list styling

The results are below:

Step 2:

JavaScript events occur all the time in your web page, when someone clicks, when the page loads, when the window is resized, etc. A good resources can be found at this page: http://www.javascriptkit.com/jsref/events.shtml that gives you a list of the many events you can call. You "capture" an event to use, a process called event registration.

A very simple kind of script could use tag attributes, and be written within your html. You can add an onclick event handler so that when a color is clicked, an alert says the color.

Your html/javascript code would look like this:

code "click blue"

Step 3:

Of course, you know that writing inline code is messy and bad practice since it's not very manageable or reusable, and takes a lot of time to create. We could add an ID to the element and use getElementById and assign an anonymous function, or function literal, to do the same thing

code getElementById

You would need to add the id to your image like this:

code getElementById

Which gives us more or less the same effect by accessing the DOM element.

Step 4:

A cleaner way would be to use an addEventListener() method. This method looks alot like dot notation, but is more versatile in calling elements within elements. When you use the addEventListener() method, not only do you say the type of event and the function you want it to do, but also add a true/false value for the propagation type, discussed in the next section of this tutorial.

Any event, onClick, onLoad, onChange, etc. can be "listened" for by the computer and when that event occurs, you can tell the browser to then do something, like the alert box to give a message.

Let's just change the earlier script, to use the event listener. Save, upload and refresh and see if your results are the same.


code add event listener

Step 5:

Here, we are making a slight adjustment to how we alert the browser to "listen" for an event and then to react to it. Page 2 of this tutorial will show how you can now extend the code to interact on events that you write.

It is worth noting that for IE8 and less, you would use attachEvent. That code looks like this:

1 | 2