javascript event handling

Events are the user actions that can be recognized by javascript which includes actions like movement of a mouse, window load, click of a button, submission of a form, etc. Javascript codes are written to perform some action when such an event is detected on the page. Some of the most used events in javascript are listed below.

• onfocus=" " Triggered when a user clicks on form fields like select, input or textarea
• onblur=" " Triggered when user clicks away from a focussed form field
• onchange=" " Triggered when value of a form field like select, input or textarea is changed
• onselect=" " Triggered when some text from the defined HTML element is selected
• onmouseover=" " Triggered when the mouse is placed over the defined HTML element
• onmouseout=" " Triggered when the mouse is moved away after hovering over the defined HTML element
• onclick=" " Triggered when the defined HTML element is clicked
• onload=" " Triggered when a web page is completely loaded including the images and iframes
• onsubmit=" " Triggered when the submit button of a form is clicked

Events like onFocus(), onblur() and onchange() are used for validation of input values of specific form fields while onload() is used to display popup messages when a user enters the page or storing cookies. onsubmit is used for validation of the entire form fields. Events like onmouseover() and onmouseout() are used to animate buttons.

Javascript can control event handlings very well. We can define secondary actions when some primary actions are performed by the user.

Display Date and Time on Click

In this demo, you can see the date displayed when the button is clicked.

Date & Time!!

<button type="button" class="btn btn-info" onclick="getElementById('demo').innerHTML = Date()">Date & Time</button>
<p id="demo"></p>  

click - is the event here so whatever instruction we give here to be performed is event handling.

The general syntax is onclick="getElementbyId()" which receives data from the pointed id when the related button is clicked.

In this case, we are pointing to the id named demo that is the p element below the button. So, js will connect to the same p element on click.

Since the p#demo is empty, we have instructed to display the system date inside the p element through .innerHTML = Date() command.

Replace Content on Mouse Hover

Now, Let's change the innerHTML element of some id where there is already some data.

Change Text!!

This is the text seen at first.

<button type="button" class="btn btn-warning" onclick="getElementById('change').innerHTML = 'This is the changed one.'">Change Text</button>
<p id="change">This is the text seen at first.</p>  

In this example, we placed some text inside the innerHTML in the syntax line and asked the browser to display it inside the the pointed HTML element instead of the data it's been displaying.

Add CSS on Click

Now, Let's add some css to the HTML elements.

Hide Me!!

Hello Guys, What's up???

<button type="button" class="btn btn-danger" onclick="getElementById('nodisplay').style='display:none'">Hide Me!!</button>
<p id="nodisplay">Hello Guys, What's up???</p>

In this example we've added a CSS property of display: none in the element on click of the related button.

Show Me!!

Hello Guys, What's up???

<button type="button" class="btn btn-primary" onclick="getElementById('display').style='display:block;color:red'">Show Me!!</button>
<p id="display" style="display: none;">Hello Guys, What's up???</p>

In this example we've added CSS property for display and color in the element on click of the related button.

---

0 Like 0 Dislike 0 Comment Share Tweet