JavaScript Events and Event Handlers

Almost all JavaScript applications perform action as a response to events.

An event is a signal from the browser that something has happens.

JavaScript have many type of the events:

• DOM Events: Events which are initiated by DOM-elements. For example: a click event happens when an element is clicked or the mouseover when a mouse pointer comes over an element.
• Window Events: Events which are related to the browser windows. For example: resize – when a browser window is resized.

Ways of assigning events to elements

JavaScript provides the many ways to assign the event to the DOM elements.

1. Using an attribute of HTML-tag.

We can use the attribute of the HTML-tag to assign the event handlers directly into the HTML markup.

While using the attribute of HTML-tag, the attribute name is always start by the “on” keyword and after that the name of the event is comes.

Attributes for the events named like “on+eventtype“.

For example: If we want to assign the click event to the DOM using HTML markup we have to use the onclick attribute of the HTML markup.

Example:

<input type="button" id="btnSubmit" value="Submit" onclick="alert('Hello World!!!');" />

As you see in the above example, I used the onclick attribute to perform the some action on the click of the button.

We can also call the function from the “onclick” attribute. For that we just have to pass the function name into the onclick attribute.

Example:

HTML:

<input type="button" id="btnSubmit" value="Submit" onclick="HelloWorld();" />

JS:

function HelloWorld() {
        alert('Hello World!!!');
}

As we know that HTML markup have the case-insensitive attribute, So the onClick, onclick, OnClick all will be work same.

This handler is vary easy and simple to use. It is simple and inline handler.

Mostly this is only used for the really simple task.

Using DOM object property

We can also set the event using the DOM object.

For that first we have to find the element from the document and after that we have to use the property of it to assign the handler.

Example:

HTML:

<input type="button" id="btnSubmit" value="Submit" />

JS:

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.onclick = function () {
    alert("Hello World");
};

Here onclick is the property, not the attribute.

Property name is the case-sensitive and all the character of the property is must be in the lower case.

We must be have to assign the function (handler) to the property, Any other object type will not work like the string or number.

We can also use the existing function as the handler, So we can assign the any existing function to the property.
HTML:

<input type="button" id="btnSubmit" value="Submit" />

JS:

function SayHelloWorld() {
        alert("Hello World");
}

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.onclick = SayHelloWorld;

We can also override the handler. If any HTML element already define the onclick attribute and we can override it using the DOM object property.

HTML:

<input type="button" id="btnSubmit" value="Submit" onclick="alert('HTML markup handler');" />

JS:

function SayHelloWorld() {
    alert("Hello World");
}

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.onclick = SayHelloWorld;

DOM element’s Handlers method

JavaScript DOM elements also have the handler method that can help us to assign the handler to the element and remove the handler from the element.

Assign handler:

element.addEventListener("event-type", handler, phase);

This will add the event handler to the HTML element.

Remove handler:

element.removeEventListener("event-type", handler, phase);

This will remove the event handler from the HTML element.

event-type parameter: In this parameter we have to pass the name of the event without the “on” prefix.

Example:

HTML :

<input type="button" id="btnSubmit" value="Submit" />

JS :

function ShowMessage() {
    alert("Now, Click event will be removed.");

    btnSubmit.removeEventListener("click", ShowMessage, false);
}

var btnSubmit = document.getElementById("btnSubmit");

btnSubmit.addEventListener("click", ShowMessage, false);

Most of the browser supports the addEventListener() and removeEventListener() method except the Internet Explorer.

For the Internet Explorer we have to use the attachEvent() and detachEvent() method, which will be used similarly to the addEventListener() and removeEventListener() method.

But the difference is only that attachEvent() and detachEvent() method accept the event name with the prefix “on”.

So try the below code for the cross browser event handler.

HTML :

<input type="button" id="btnSubmit" value="Submit" />

JS :

function AddEvent(element, eventType, fun) {
    if (document.addEventListener) {
        element.addEventListener(eventType, fun);
    } else {
        element.attachEvent("on" + eventType, fun);
    }
}

function RemoveEvent(element, eventType, fun) {
    if (document.removeEventListener) {
        element.removeEventListener(eventType, fun);
    } else {
        element.detachEvent("on" + eventType, fun);
    }
}

var btnSubmit = document.getElementById("btnSubmit");

function ShowMessage() {
    alert("Now, Click event will be removed.");

    RemoveEvent(btnSubmit, "click", ShowMessage);
}

AddEvent(btnSubmit, "click", ShowMessage);

Cross-Browser-Event Demo