Reacting Upon JavaScript Events | JavaScript Phrasebook

button.addEventListener("click", eventHandler,   false); button.attachEvent("onclick", eventHandler);

Reacting on JavaScript events can be done in different ways:

Using an HTML attribute:
```
<body onload="xyz();"> 
```
Using the onXXX JavaScript attribute:
```
window.onload = xyz; 
```

However, there are various, competing event mechanisms in the different browsers. Internet Explorer supports attaching events to an element using the attachEvent() method. The name of the event here equals the HTML attribute, so you use "onload", for instance (though the event itself is called "load").

All other relevant browsers support the addEventListener() method, a part of the W3C model. Here, you provide the name of the event, so just "load" instead of "onload".

The following example shows how to attach an event to a button in a cross-browser fashion:

Attaching an Event (attach.html)

<script language="JavaScript"   type="text/javascript"> function eventHandler() {   window.alert("Event fired!"); } window.onload = function() {   var button =     document.getElementById("eventButton");   if (button.addEventListener) {     button.addEventListener("click", eventHandler,       false);   } else if (button.attachEvent) {     button.attachEvent("onclick", eventHandler);   } }; </script> <input type="button"    value="Click me!" />

Note

You can remove event handlers, as well. Internet Explorer uses detachEvent(), whereas other browsers follow the W3C and name their function removeEventListener().

Understanding Event Bubbling

When it comes to event handling, today's browsers support one of two concepts. Internet Explorer works with the so-called "event bubbling": An event is first fired from the very element where it occurs, and then bubbles up the DOM structure. Therefore, it is possible to capture and react upon this event at various places. For instance, imagine the following markup:

<div><p><em>JavaScript</em> Phrasebook</p></div>

If the mouse hovers over the text JavaScript, the mouseover event is first fired in the <em> element and then bubbles up to the <p> and <div> elements.

The competing model is the W3C model, which is supported by Mozilla browsers, Opera, and Safari/Konqueror. Here, the events are first sinking downward to the target element, and then bubbling up. So in the previous example, the event "visits" the <div>, <p>, and <em> elements and then bubbles up again via the <p> and <div> elements. When adding an event listener, you can specify in the third parameter of addEventListener() whether the event will be intercepted during sinking down (true) or bubbling up (false).

After an event has been intercepted, it is also possible to stop it from sinking down or bubbling up.

In Internet Explorer, set the event's cancelBubble property to false:

window.event.cancelBubble = false;

The W3C model supports the stopPropagation() method:

e.stopPropagation();

As you can see, in Internet Explorer the current event is always available via window.event, whereas other browsers automatically receive the event as the parameter (here called e) for the event listener.