Event Handlers

Site:	Philippine Science High School - MC - Knowledge Hub
Course:	SY25.CS3.Web Development
Book:	Event Handlers

Printed by:	, Guest user
Date:	Monday, 6 October 2025, 11:29 PM

1. Introduction
2. HTML Events
- 2.1. onclick
- 2.2. onload
3. Summary and References

1. Introduction

After completing this module, you would be able to:

Explain the concept of events and triggers
Create necessary code to capture and handle event

In the previous lesson, we discussed the concept of functions, why is it important to create functions especially with long and complex codes. We also discussed how to define a custom JavaScript function by using either function as a declaration method or function as an expression method.

In this lesson will be discussing how to make your web pages interactive by creating processes through the use of functions that react how a user is using your website through HTML events.

2. HTML Events

Current Web sites are designed to be able to react or process users' interaction with the webpages or something that is happening with a browser. HTML Events could be when a browser opens or closes or when a user hovers on an HTML element, or when a user clicks on a button. A web page could have a process attached to certain HTML events.

Each HTML event has an attached event handler that could be used to trigger a call to a function to enable it to process these events. Event handlers are used inside the beginning tag of an HTML element. The format in using an event handler would be:

<element eventhandler = ”javascript code”>

In this lesson, we will be discussing and using only two event handlers, which are: onclick and onload. Other event handlers are available and will be discussed as we progress in the course.

2.1. onclick

onclick event handler is used to detect a mouse click HTML event on an element. Several simple examples are shown below on how to use this event handler on an element.

<p onclick="alert('So I click you, now what?')">Click Me.</p>

In the example above, when users click on Click Me an alert dialog box with the message So I click you, now what? will be shown.

<p onclick="this.innerHTML = 'It had been clicked'">Click Me.</p>

The example above, replaces the content of the paragraph element Click Me to It had been clicked when a user clicks on the element. Important keywords used here are this and .innerHTML. The keyword this refers to the element that uses it, in this case the paragraph element, while the keyword .innerHTML refers to the content of an HTML element.

The next two example codes is to change the image:

<img onclick="this.src='img_girl.jpg'" src="smiley.gif" width="100" height="100" style="border:5px solid black">



<!DOCTYPE html>
<html>
<body>

       <img id="image" onclick="changeImage()" src="smiley.gif" width="100" height="100" style="border:5px solid black">

       <script>
             function changeImage()
             {
                 image.src='img_girl.jpg';
             }
       </script>
</body>
</html>

The above two examples will achieve the same result.

The first sample uses this.src to change the image from smiley.gif to img_girl.jpg. While the second sample code, calls the defined function changeImage when a user clicks on the smiley image. Inside the function, the id of the img element which is image is used to enable the script to change images through img src attribute. An alternative statement to image.src='img_girl.jpg'; would be document.getElementById("image").src='img_girl.jpg'; as discussed in the previous lessons. The advantage of the second example code, is that you can extend the functionality attached to the event handler onclick.

2.2. onload

onload event handler triggers a process when an HTML object or element is loaded. Normally the onload event handler is used inside the <body> tag. When used inside the body tag, it could trigger for example a test on the type of browser or if a cookie is enabled on a browser.

A simple code example below is when a web page is loaded and reloaded will display a different background color each time. The code will be using a native function or method called Math.random(). This function or method will be discussed in more detail in another learning guide.




<!DOCTYPE html>
<html>
<body onload="changeColor()">

      <h1>Changing Color for each load</h1>

      <script>
              function changeColor() {
                  /* randomize generation of numbers from 1 to 255*/
                  var red = Math.ceil(Math.random() * 255);
                  var green = Math.ceil(Math.random() * 255);
                  var blue = Math.ceil(Math.random() * 255);

                  var dColor = "rgb(" + red + ","+green+","+blue+")"; 
		   console.log(dColor);
                  document.body.style.backgroundColor = dColor;
              }
       </script>
</body>
</html>

In the example code above, the function changeColor is called when a browser loads the webpage or when the web page is refreshed. Inside the changeColor function a random number from 1 to 255 will be generated for red, green and blue variables. These color values will be concatenated together using the + sign and place inside dColor variable to form the CSS value for color rgb(red,green,blue).

The dColor will then be assign to the body background color using the statement:

document.body.style.backgroundColor = dColor;

This statement is using the attribute style of the body tag and the CSS property background-color but translated to backgroundColor in JavaScript.

3. Summary and References

Summary

HTML events are all the things that happen on a web browser or user interactions on the different elements of a web page. These events are detected by event handlers that could trigger a call to javascript functions in order for the web page to process them.

There are several event handlers and onclick and onload were discussed in this learning guide. onclick event handler detects users’ mouse click on an element while onload detects when an HTML object or web page gets loaded or refreshed.

References

JavaScript Events. (n.d.). Retrieved from W3Schools: https://www.w3schools.com/js/js_events.asp

Math.random(). (n.d.). Retrieved from MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

onload Event. (n.d.). Retrieved from W3Schools: https://www.w3schools.com/jsref/event_onload.asp