Dom Events JavaScript Tutorial

Events

Events are one of the most important subjects in JavaScript, and a good knowledge of how they work and their performance implications is critical. Events are certain actions performed either by the end user or by the web browser itself. In order to make a web page more interactive, the script needs to be able to access the contents of the document and know when the user is interacting with it.

Dom Events

The Document Object Model event is a way of handling events and providing information about these events to the script. It provides a set of instructions for a standard way of determining what generated an event, what type of event it was, and when and where the event occurred in the document.

Dom Event Handlers

In Javascript, you can attach a function ( event handler) to a specific event and the browser will execute your function as soon the event occurs. These Event handlers have names starting with "on", so an event handler for the click event is called "onclick" and an event handler for the focus event is called "onfocus".

Inline HTML Attributes

There are several ways you can attach an eventhandler. Adding specific attributes to a tag is the easiest way. In order to execute some JavaScript when a heading(h1) is clicked, you can use the following:

Click Me

Full Source

<h1 id="h1" onclick="alert('Clicked...!!')">Click Me</h1>

In the above case when the user clicks on the h1 tag, the click event fires and the string of JavaScript code contained in the onclick attribute is executed.

Function Call

When the vents occur, if you want to execute a bunch of code, you can put all codes together in a function and call for the execution.

Full Source

<script type="text/javascript">
function findSum(a,b)
{
	alert("Sum is : " + (a + b));
}
</script>
<input type="button" value="Click Me" onclick="findSum(10,15)" />

Event Listener

As the user interacts with the elements on the web page like double click them, mouse over them, clicking them, selecting them etc. the browser translates those interactions into events within the elements. A function that is called in response to an event is called an event handler. You can then attach an event handler to an element for a specific event. When the user interacts with an element, the browser detects whether an event handler is registered for that event type on that element. If so, the browser executes that handler. The following program demonstrates how to capture different event types in Javascript.

Mouse Over Here !!

Click Here !!

Double Click Here !!

Full Source

<!DOCTYPE html>
<html>
<body>
<h1 id="h4" onmouseover="handle(event)">Mouse Over Here !!</h1>
<h1 id="h2" onclick="handle(event)">Click Here !!</h1>
<h1 id="h3" ondblclick="handle(event)">Double Click Here !!</h1>
<script type="text/javascript">
	function handle(e)
	{
		alert(e.type);
	}
</script>
</body>
</html>

More Event Models

The Document Object Model standard provides a large number of events and they can be grouped into six major categories:

MouseEvents : click, mousedown, mouseup, mousemove, etc.

KeyboardEvents : keypress, keydown, and keyup

HTMLEvents : load, error, resize, scroll, etc.

Form events : select, change, submit, reset, focus, etc.

UIEvents : focusin and focusout.

MutationEvents : DOMNodeInserted, DOMAttrModified, etc.

DOM Level 2 Event Handlers

The best approach to work with browser events is to use the event listener way stated in DOM Level 2, where you can have many functions listening to an event. When the event fires, all functions are executed.

example

Click Me!

Full Source

<!DOCTYPE html>
<html>
<body>
<p id="firstParagraph">Click Me!</p>
<script>
var firstPar = document.getElementById("firstParagraph");
firstPar.addEventListener("click", myEventHandler, false);
function myEventHandler(event)
{
	alert("You clicked me!");
}
</script>
</body>
</html>

DOM Level 2 Event Handlers provides for that is the addEventListener() method, which takes three arguments:

1. An event type argument: click, dblclick, mouseover, keypress, etc.

2. A listener argument: the code to execute when the event happens.

3. An optional Boolean phase parameter: that instructs the event handler to execute either during bubbling phase (default , false) or capture phase (true).