How to js event handlers?

Posted under javascript sample code On By mohammed.mutawe

JS event handlers

When you start creating an HTML page, in most cases, you will find many features that appear to the user while moving the mouse, for example, or clicking on it, or some additional properties that appear when browsing on the page. If you want to know why JS event handlers works, you must first understand its benefits and how it works.


The Event Handler is placed in a designated place in the code and does its work as it should. In fact, the most powerful features of JavaScript is the Event Handler, and the reason for that is because it made a big change to web pages, which led to the spread of the most powerful pages on the WEB. If we go to Facebook, we will find that there are hundreds of thousands of lines From JavaScript, which gave many of the functionality and aesthetics of the page.



  • What Event is?
  • Definition of js event handlers.
  • Where to use JS Events?
  • Create an Event Handler.


What Event is?

Event Handlers are specified inside an HTML tag and most of the time it is an element in the document that is used to handle web elements that make up the page. On the keyboard or pressing somewhere inside the web page to perform a function.



In this definition we will only give the simplest example of adding js event handlers and how it is used to become as follows:

<input type="button" value="Click Me Now!" onclick="clickMe();" />

function clickMe()
  window.alert('Welcome to your first js event handlers !!');


Where to use JS Events?

There are many famous websites that use js event handlers to a large extent, even with WordPress or Wix or even joomla templates or others, there is the possibility of using JS Events, but in one way or other names, and we will mention the most important examples of using Events in JavaScript, which are:

  • Hover with CSS and JS Events.
  • HTTP request.
  • Pure Elements creation.


Hovering with JS

You can connect to CSS files via JavaScript and make some improvements to colors, font style, and other CSS additions. JS has a default connection with CSS styling, which puts you in front of two options: use the design in CSS or rely on JavaScript to make some designs.

Accessing CSS files via JavaScript is not tampered with. Sometimes you need to add elements and tags that you cannot modify in CSS because they are not predefined in memory and for this reason you will use the temporary running of JavaScript elements, which works to manage memory in the browser well Extremely.


HTTP request

You will need JavaScript with Ajax technology when connecting to the server page, which only works in js event handlers. This stage helps you to make some modifications to the server databases without the need to make a refresh of the browser page. It has attracted many attention because it works with Realtime server technology, so imagine Java Scripts are great when managing databases quickly with Backend languages ​​for servers.


Elements creation

Another type of memory management through JavaScript is the use of adding temporary elements and sometimes we need that because the computer does not know what our plans are in using databases during the visitor’s session.

To simplify things a little, imagine that you made a login on the LinkedIn site and then started a conversation with a person, the information of this conversation will appear for the first time in the databases and the server does not even know that until after recording the texts of the conversation, it can only store them by order from you, which means Create Elements in JavaScript .

From my personal experience, adding temporary JavaScript elements and saving them to the server is one of the most advantages that really amazed me in web programming because I accessed the databases directly by opening and closing some elements without making any major updates on the page.

When you become familiar with JavaScript, you will be able to understand what I really mean!


Create an Event Handler

If you have no idea about CSS then I want you to take a quick look at the CSS section so you can understand what will be written as we will mess around with colors via JS Event Handlers.

I will copy a code from a large project, but it contains a simple idea, which is to add an HTML tag with an ID and then call it via js event handlers and then I will implement a dark blue background and this is the code initially:



<div id = "vav_c_home" style="text-align:center; font-size:">Welcome To CSS3</div>

// Apply color while run the HTML page
document.getElementById("vav_c_home").style.color = "#2b2d2d";

 //Apply CSS hover on area If touched by the mouse
        var css = '#vav_c_home:hover{ background-color: #517AA7; }';
        //Create Child element by JS then apply new color on
        var style = document.createElement('style');

        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {


I defined a tag in HTML and then added an ID to it with the title vav_c_home which is a unique address that should not be repeated in the elements because there is no confusing between variables in JS or even any other language and then I call it with the famous JS code document.getElementById which allows me to access the elements You call CSS and add a predefined color.

And then I applied another color when I touched that area with the mouse and it actually made a change via hover, which is already in CSS. In short, I combined CSS into JavaScript while working ,I know this code is difficult for beginners, but I will try to simplify it later. Copy it into your browser to see how it works.



Leave a comment

Your email address will not be published. Required fields are marked *