Event Handling
Any action that a user performs on a web page is known as an event. Like moving of mouse, clicking button, clicking a link, text input, selection or even loading a page. Event handlers are used to handle an event on a web page. JavaScript has a predefined event handler as property of an object. When an event occurs, JavaScript event handlers can be used to identify events and perform a specific task.
Event handlers can be used directly within HTML elements by using special attributes. The event handlers can also be used within <script> </script> tags or in an external javascript file.
Event Handlers in HTML elements
To add event handler in HTML elements we need to use actual event handler name. For example:
<input type=”button” value=”Click Here” event-handler-name=”JavaScript Code for the Event”>
For the above example we will be using onclick event handler, which is triggered when user clicks a button. Please note that event-handler-name is an event handler attribute and not an HTML attribute. In HTML attribute only values can be assigned, but whereas in event handler attribute javascript code can be added. For example:
<input type=”button” value=”Click Here” onclick=”window.alert(‘Clicked’);”>
In the above code when a user clicks on the button, an alert window will popup displaying the message.
The Javascript code inside event handler attribute ends with a semicolon. This enables us to add multiple javascript statements to perform several actions on click event.
When using multiple statements to perform several actions in HTML elements, the javascript code can become really long, which is cumbersome to debug. Therefore, the code can also be written as a function, and event handler can call this function to perform actions. For example:
function displaymsg()
{
alert(“Button”);
alert(“Clicked”);
}
<input type=”button” value=”Click Here” onclick=”displaymsg();”>
Event Handler in Script Code
The event handlers can also be written within script code, to do this id attribute need to be specified in HTML elements. The id attribute can then be retrieved using document.getElementById() method to access the HTML element.
<input type=”button” value=”Click Here” id=”bt1”>
<script>
var elem = document.getElementById(“bt1”);
elem.onclick = function ()
{
alert(“Button”);
alert(“Clicked”);
}
</script>
In the above code function expression is used to assign event handler to the id retrieved with click event.
Events table please check
Click Event
The Click event occurs when user clicks on an element. For Example:
Event on a link <a>
Focus and Blur events
The focus event occurs when the user focus on an element. The focus is given by clicking some place within the item. For example:
<input
The blur event occurs when the user takes the focus away from an element.
<input
Load and unload events
The load event occurs when web page finishes loading.
<body
The unload event occurs when a user leaves the current web page.
<body
Reset and submit events
The submit and reset event are used when forms are used in a document. The form can have its contents to by submitted or reset. The submit event occurs when a user submits a form. The reset event occurs when a user wants to reset form fields by clicking reset button.
<form onsubmit=
Mouse Events
mousedown
mouseup
mouseenter
mouseleave
mouseover
mouseout
mousemove
mousewheel
Keyboard Events
keydown
keypress
keyup
Registering Multiple Events
The event such as onclick, onblur, onfocus, onload etc. are known as DOM level 0 event handlers. The DOM level 0 event handler allows only one event to be registered on any element. The Javascript provides methods such as addEventListener() and attachEvent() that allow multiple events to be attached to an element and these are known as DOM Level 2 event handlers.
To better understand DOM level 0 event handling, let us see the example below:
<script>
var elem = document.getElementById(“bt1”);
elem.onclick = function ()
{
alert(“Button”);
}
elem.onclick = function ()
{
alert(“Clicked”);
}
</script>
In the above example, the second onclick event handler will override the first onclick event handler, since only one event can be assigned to an element. By using DOM level 2 event handlers this issue can be avoided.
The addEventListner() method allows three arguments, which are event, function to execute an event and value true/false depending on how the event handler functions in capturing and bubbling phase. For example:
element.addEventListner(“event_type”, function, true/false);
<script>
var elem = document.getElementById(“bt1”);
elem.addEventListener(“click”, function ()
{
alert(“Button”);
}, false);
</script>
If capturing is used, then outer most elements event occurs first and then innermost elements event occurs last. If bubbling is used it is exactly opposite. Bubbling phase is recommended and most commonly used.
attachEvent() method
The attachEvent() method works the same way as addEventListener() method, but only works in bubbling phase. For Example:
element.attachEvent(event_handler,function-name);
<script>
var elem = document.getElementById(“bt1”);
elem.addEventListener(onclick, function ()
{
alert(“Button”);
});
</script>