In continuation to what we have previously introduced, let us quickly revise the previous article. In the previous article, we mentioned how to HTML DOM elements using the JavaScript functions over the document object. We also worked on how to create an HTML element, append it, how to remove and replace an HTML element and how to add content (innerHTML) in a HTML element. In this article, we will learn about Event Handling in JavaScript and how can they boost the functionality of our webpage.

Event Handling

Event Handling in JavaScript have so many predefined events on certain actions that are being performed on the webpage. We will take few of them  one by one and will try to give a webpage a beautiful layout as well as good functionality.

EventsDescription
onchangeWhen an HTML element has been changed.
onclickWhen the user clicks an HTML element.
onmouseoverWhen the user moves the mouse over the HTML element.
onmouseoutWhen the user moves mouse away from the HTML element.
onkeydownWhen the user presses a key on the keyboard.
onloadWhen the browser has finished loading the document.

onchange

Event Handling in JavaScript handles the onchange event when there is a change in content of <input>, <select>, <keygen> and <textarea> and an event change function has been attached to that selector. For example: –

onclick

Event Handling in JavaScript handles the onclick event by using the selector on which the onclick event needs to be handled. For example: –

onmouseover

Event Handling in JavaScript also helps to trigger a mouse event when the cursor is over an HTML element. We handle this by the use of selector to capture the HTML element on the document. You can see this in the example below: –

 

In this example you will see that “onmouseover” on the ‘red’ block color changes to ‘blue’ and of the outer container changes to ‘green’.

onmouseout

Event Handling in JavaScript handles this event when we have to trigger an event in case the cursor is moves away from an HTML element. We handle this by the use of selector to capture the HTML element on the document. You can see this in the example below: –

 

In this example you can see that when the cursor is over ‘red’ block color is not changing but when the cursor moves away from the ‘red’ block color change appears due to JavaScript event “onmouseout”. And when the user moves the cursor again over the ‘blue’ block color change again appears due to JavaScript event “onmouseover”.

 

onkeydown

Event Handling in JavaScript handles this event when the user presses any key on the keyboard. Let’s see how this event actually works by looking over this example.

In this example you can see the ASCII code of every character you type.

onload

Event Handling in JavaScript handles the onload event when you need to call some function or append some HTML element after loading the document or have to wait for an event to occur when the document has loaded. As when you would call a function over some HTML element or you want to append some HTML element to another element, you’ll not be able to find that element as document is still not fully loaded. Here, onload function helps you. Let’s see this with an example. We will append an HTML element over existing elements.

http://codepen.io/MayankDargan/pen/kkbEdd

Event Handling in JavaScript provides an ease in attaching events and providing functionalities on to the client side of your webpage rather than making a server hit. So this was all about Event handlers in JavaScript. In the coming article, we will talk about jQuery and how we use JavaScript functions in jQuery.

 

 

Leave a Reply

%d bloggers like this: