Ajax JavaScript CSS HTML 5 Gecko XUL Forum

Event management in JavaScript

It is possible to create his own event handlers with the addEventListener function and objects as Event, EventListener, DocumentEvent.

This replaces predefined event handlers shaped as attributes of HTML or XML such as onClick, onMouseOver, etc. ...

And this is part of the Document Object Model Level 2 Events, a specification that describes an interface for events, ie to user actions, allowing to dynamically add event handlers to HTML or XML.

A function is linked to an action with addEventListener

This method associates an event handler to any element of an HTML page, dynamically after its loading.
The syntax:

EventTarget.addEventListener(DOMString, EventListener, boolean)

Example:

x.addEventListener('click', function, false)

Any tag has en EventTarget interface

A EventTarget interface is inherited by any element in an HTML page. This allowsto associate three methods:

In our example, the  x tag is de facto, as any tag, a EventTarget.

addEventListener may be associated to a document, a node (a tag), the document itself (document), a window (window name or window), the XMLHttpRequest object.

Several functions may be linked to an event on a same element:

x.addEventListener('click', function1, false);
x.addEventListener('click', function2, false);

The name of an event is a DOMString

The DOMString argument is a string that contains the name of a standard event. The supported events for mouse are:

There is no keyboard support in DOM 2.
DOM 3 recognizes the types: keypress, keydown, keyup and other types of events, see links below.

The function linked to an event is a EventListener

The listener may be a function defined by the user or an object implementing the EventListener interface.
To pass parameters to the function, use an anonymous function.

A boolean captures the event

It concerns the capture of the event type. Use false if you do not need it.
If the value is true, all events of the specified type here will be passed first to the EventListener here before being passed to other EventTarget in the document.

addEventListener replaces HTML event handlers by dynamic code, demo

For example, we'll see how to replace the HTML onClick attribute by addEventListener.

Normally the event handler is associated with an object, a button for example:

<input type="button" id="mybutton" value="Submit" onClick="myfunction()">

This calls a JavaScript function declared in a script:

function myfunction()
{
  alert("Clicked");
}

The event handler onClick is removed:

<input type="button" id="mybutton" value="Submit">

It is replaced by a call to addEventListener:

function addOnClick()
{
  var x = document.getElementById("mybutton");
  x.addEventListener("click", myfunction, false);
}
window.onload=addOnClick;

The action "click" may be replaced with one of the other types listed above.

For compatibility with Internet Explorer 8 and earlier versions, you must use attachEvent:

function myfunction()
{
  alert("Clicked!");
}


function addOnClick()
{
  var x = document.getElementById("mybutton");
  if (x.addEventListener)
  {  
    x.addEventListener('click', myfunction, false);
  } 
  else
  {
    x.attachEvent('onclick', myfunction);  
  }	
}

attachEvent has as first parameter the HTML event handlers in contrast to addEventListener.

Using addEventListener seems more complicated for an elementary action, as in this example, that the HTML attribute, but it opens the door to a much broader range of possibilities.
We can add an event handler in a JavaScript loop to an overall type of elements in the page.

Example with onClick

HTML code:

<input type="button" id="button1" value="Submit" onClick="myfunction()">

The JavaScript code is just the function defined above.

With addEventListener

Using addEventListener we can suppress the onClick in the HTML code.

HTML code:

<input type="button" id="button2" value="Submit">

The JavaScript code is that given above.

Dynamically creating code and adding an event handler

We create an img element to which is assigned an image that is then displayed, and an event manager that calls the function imageclick when you click on the image.
Note that the called function, the listener, can have a parameter with the use of an anonymous function as parameter of addListener.

Source code:

  <div id="imgstorage"></div>
  <script>
  function imageclick(fruit)
  {
    alert("This is the image of: " + fruit);
  }
  var s = document.getElementById("imgstorage");
  var i = document.createElement("IMG");
  i.src="http://www.xul.fr/images/apple.jpg";
  s.appendChild(i);
  if(i.addEventListener)
  {  
    i.addEventListener('click', function(){imageclick('Apple');}, false);
  } 
  else
  {
    i.attachEvent('onclick', function(){imageclick('Apple');});  
  }  
  </script>

References

© 2010-2012 Xul.fr