JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 10. Events

The things that drive responsive webpages are user interactions with the website. Whenever a user clicks on the button, something happens. Whenever a user scrolls the page, something happens. Those things happen due to the JavaScript.

But how can you make those scripts work when the user does something to your page? Well, you need to indicate them in your script. And capture those events.

In this section, you will be taught of how you can take advantage of functions, simple JavaScript code snippets, and incorporating them on HTML events. For example:

<button onClick = "alert('This is a popup box.')" >Click me please!</button>

Try inserting that on your sample web page. Load your sample web page, and then click the button element that you inserted. Of course, as the sample code implies, the page will launch a popup box containing the message, “This is a popup box.”

In layman’s terms, that HTML line makes your browser put a button element that executes a simple alert code whenever you click on it or fire the onClick event. onClick is just one of many events that you can use and integrate on your HTML elements.

By indicating these events in the elements, you will be able to make your pages and elements “respond” to almost all actions that your users will do. A few of events that you can capture are onLoad, onChange, and onMouseOver.

Syntax and Case

Take note: since these events must be coded on your page’s body, case sensitivity does not apply to the events. For example:

<button ONCLICK = "alert('Another button clicked.')" >This is another button?</button>

When you click this button, the browser will still “fire” or “invoke” the JavaScript code that you placed on it regardless of the case of the event. However, changing the case of the code within the event can cause errors. Despite being outside of the script tags, inserted codes like these are still considered part of your JavaScript code. So, syntax rules of JavaScript are still applied on them. For example:

<button ONCLICK = "ALERT('THIS WILL NOT WORK.')" >This will not launch a message box. Clicking is futile.</button>

Event Exclusivity

Most of the events can be used on almost all elements. For example, you can place the onClick event on a paragraph element (<p>).

<p onClick = 'alert("You clicked on me. Yay!")' >This is a sample paragraph.</p>

However, certain events are exclusive to some elements. For example, the onChange event cannot be used to button (<button>) and paragraph elements (<p>), but it will work on a text area element (<textarea>).

<button onChange = "alert('Will this work?')" >Click me!</button>

<p onChange = "alert('Most probably not.')" >Am I changeable?</p>

Since you cannot change the content or value of the paragraph and button elements, the onChange event will not fire. On the other hand, if you do change the content of the text area element, it will launch a popup. Alternatively, if you do just click on it or revert the changes you made on it, the event will not fire.

Curious Cat

What if you try something “smart” and tried to do some “changes” on an element like button? You can actually change the content of those kinds of elements using DOM and the innerHTML property. Will the onChange event will fire if you do that? Try these lines of code:

<button id='x' onChange = "alert('Will this work?')" >Click me!</button>

<button onClick = "document.getElementById('x').innerHTML = 'xxx'" >Click me!</button>

Unfortunately, you cannot work around that. On the other hand, trying to emulate those events (and hope that it can save you some time) is inefficient. You can just code it instead of experimenting.

Multiple Events

Of course, to make your page more responsive, you can indicate and capture multiple events in one element. For example:

<button onClick = "alert('This is a popup box.')" onMouseover = "alert('This is a popup box.')" >Click me please!</button>