The addEventListener Method

You use the addEventListener method to add a W3C event listener to an object, as discussed earlier in this chapter (see "Handling Events in the W3C DOM"). You can see the support for this method in Table 6.6.

Table 6.6. The addEventListener Method

Method	NS2	NS6
`addEventListener(` `event, listenerFunction, capture` `)`
		x
	No return value

To use this method, you pass the W3C event you want to work with (see Table 6.3), the listener function you want to use to handle events, and a Boolean set to true if you want this event to "bubble" (that is, move upward to parent objects as we'll discuss in Chapter 15). Here's the example we saw earlier in this chapter that uses addEventListener to connect a listener function to a <SPAN> element's W3C click event:

 <HTML>      <HEAD>          <TITLE>Handling W3C Events</TITLE>      </HEAD>      <BODY>          <H1>Handling W3C Events</H1>          <P><SPAN ID="span1">Click Me.</SPAN></P>          <P><SPAN ID="span2">Click Me Too.</SPAN></P>          <FORM NAME="form1">              <INPUT TYPE="TEXT" ID="text1"></INPUT>          </FORM>          <SCRIPT LANGUAGE="JavaScript">              <!--  document.getElementById("span2").addEventListener("click", display, true)  function display(e)              {                  document.form1.text1.value = "You clicked: " +                      e.currentTarget.id              }               // -->          </SCRIPT>      </BODY>  </HTML>