How to Use JavaScript’s Document Event Object to Program with HTML

The Document Event object is unique in that it lets you create other events in JavaScript. You use the createEvent() method to create an event that could simulate something like a mouse click. Even though this object provides just one method, it’s a powerful method. The only way to really understand this particular object is to see it in action. The following example performs three tasks:

  • Provides a means of generating a simulated click

  • Adds an event handler that prevents the default action of simulating the click

  • Removes the event handler that prevents the default action of simulating the click

This is a somewhat advanced example, but it’s also incredibly useful code because you can use it to add automation to your applications that will prove helpful to less skilled users.

function SimulateClick()
{
  // Create the event.
  var ClickEvent = document.createEvent("MouseEvents");
 
  // Configure the event.
  ClickEvent.initMouseEvent(
   "click", // Event type
   true,  // Can use the bubble technique?
   true,  // Is this event cancelable?
   window, // View, should always be window.
   0,    // Number of mouse clicks.
   0,    // Screen X coordinate
   0,    // Screen Y coordinate
   0,    // Client X coordinate
   0,    // Client Y coordinate
   false,  // Ctrl Key Pressed?
   false,  // Alt Key Pressed?
   false,  // Shift Key Pressed?
   false,  // Meta Key Pressed?
   0,    // Number of button clicked.
   null);  // Related target
 
  // Obtain a reference to the object.
  var TestCheck = document.getElementById("chkTest");
 
  // Perform the click and record whether the click
  // was cancelled by another handler.
  var Succeeded = TestCheck.dispatchEvent(ClickEvent);
 
  // Display the result of the simulation onscreen.
  if (Succeeded)
  {
   alert("The click succeeded!");
  }
  else
  {
   alert("The click was cancelled!");
  }
}

The code begins by obtaining a reference to the target event object, which is MouseEvents in this case. The initMouseEvent() function takes a host of arguments — all of which are required to make the example work. Check here to read more about arguments.

After the code creates an event, it’s time to obtain a reference to the control that will use the event. In this case, the example uses a check box named chkTest. To issue the event, the application calls dispatchEvent() with the event, ClickEvent, as the argument.

This act fires (issues) the event. The return value determines whether the event succeeded. When using the default listener and handler, the check box is either selected or deselected, depending on its previous state.

The code ends by determining the return status of Succeeded. If nothing prevents the event from succeeding, Succeeded is true, and the first alert() displays onscreen. Otherwise, you see the second alert() message. Of course, the question now is how to prevent the default action from occurring. The following code performs this task:

function PreventDefault(event)
{
  // Prevent the default action.
  event.preventDefault();
}
function AddHandler()
{
  // Obtain an object reference.
  var TestCheck = document.getElementById("chkTest");
 
  // Add the event handler.
  TestCheck.addEventListener(
   "click",     // Type of event
   PreventDefault,  // Name of the event listener.
   false);      // Use the capture technique?
}
function RemoveHandler()
{
  // Obtain an object reference.
  var TestCheck = document.getElementById("chkTest");
 
  // Add the event handler.
  TestCheck.removeEventListener(
   "click",     // Type of event
   PreventDefault,  // Name of the event listener.
   false);      // Use the capture technique?
}

When the PreventDefault() function is active, it accepts an Event object as input. This event handler automatically stops the default action from happening by calling preventDefault(). The check box isn’t selected, and Succeeded is set to false when this happens.

However, the PreventDefault() function isn’t active at the outset. To make it active, the application calls AddHandler(), which adds an event listener using the addEventListener() function to the check box, chkTest. This approach lets you determine whether the browser can use the capture technique for working with multiple event handlers. To remove the event handler, the application calls RemoveHandler(), which reverses the process by calling removeEventListener().

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com