Handling Events | Inside JavaScript

Working with events in JavaScript has grown complicated over the years as event object models have changed and more functionality has been added. There are all kinds of things you can do in event handling in JavaScript. Here's an example that reassigns event handlers on-the-fly (you'll need version 6+ if you're using Netscape Navigator):

(Listing 15-12.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Reassigning Event Handlers          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function alerter()              {                  window.alert("You clicked the button!")              }  function reassign()   {   document.getElementById("button1").onclick=alerter2   }  function alerter2()              {                  window.alert("Here's a new message!")              }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Reassigning Event Handlers</H1>          <FORM>              <INPUT TYPE="BUTTON" ID="button1" ONCLICK="alerter()" VALUE="Click Me!">  <INPUT TYPE="BUTTON" ONCLICK="reassign()" VALUE="Reassign event handler">  </FORM>      </BODY>  </HTML>

Most of the complexity involved in event handling comes from dealing with the different event object models,as we saw in the beginning of this chapter when we worked with the keyboard and the mouse.There are three event modelsthe NS4,NS6,and IE4+event models;I 'll take a look at all of them here.

Tip

See Chapter 6 for the basics on event handling,such as making sure event objects are passed to event handlers and so on.For the syntax of JavaScript 's core properties and methods that you can use with events,such as captureEvents and addEventListener , see Chapters 5 and 6.We 'll see many of these properties and methods in use in this chapter.