html event classes

The loading, display, and user interaction events with a HTML page can be captured and acted upon by a script linked to the page. Most of the events are associated with a particular element in the HTML document. The HTML standard defines the following events:

document events: onload, onunload
mouse events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout
html events: onfocus, onblur, onsubmit, onreset, onselect, onchange
keyboard events: onkeypress, onkeydown, onkeyup

There are more events not directly accessible from HTML (i.e., onerror events associated with the window).

loading/unloading events

After a page is fully loaded the onload script is executed. The onload attribute occurs in the body element. The onunload script is executed when a page is being replaced with another page.

loadunload_a.html

<html>
    <head>
        <title> loading/unloading events </title>
    </head>
    <body onload="alert('A loaded');" onunload="alert('A unloaded')">
        <a href="loadunload_b.html">change page</a>
    </body>
</html>

The b version is:

loadunload_b.html

<html>
    <head>
        <title> loading/unloading events </title>
    </head>
    <body onload="alert('B loaded');" onunload="alert('B unloaded')">
        <a href="loadunload_a.html">change page</a>
    </body>
</html>

The onload can also be used in the img and frameset elements.

These events are favorites with the pop up ad surveyors.

mouse events

The mouse is one of the main input devices used by browser uses. Many of the interactive behaviours of web browsers are triggered by mouse events.

mouse.html

<html>
    <head>
        <title> mouse events </title>
    </head>
    <script type="text/javascript">
	function display_clear() {
	    var display = document.getElementById( 'display' )
	    display.value = ''
	}

	function display_event( e ) {
	    var display = document.getElementById( 'display' )
	    display.value += "\n" + e 
	}

	urls = ["../../images/circles.png", "../../images/circles-b.png"]
	urlIndex = 0;

	function rollover( e ) {
	    display_event("click: " + e)
	    urlIndex++;
	    urlIndex %= urls.length;
	    var img = document.getElementById( 'cir' )
	    img.src = urls[ urlIndex ]
	}

        function reg_events() {
	    // init event handlers with javascript
	    var img = document.getElementById( 'cir' )
	    img.onmouseover = function( e ) { display_event("over: " + e) }
	    img.onmouseout = function( e ) { display_event("out: " + e) }
	    img.onmousedown = function( e ) { display_event("down: " + e) }
	    img.onmouseup = function( e ) { display_event("up: " + e) }
	    img.onclick = rollover
	}
    </script>
    <body onload="reg_events()">
	<img id="cir" ondblclick="display_event('dbl:' + this)"
	     src="../../images/circles.png">
	<br>
	<textarea id="display" rows="12" cols="40">
	    event message sent here
	</textarea>
	<br>
	<button onclick="display_clear()">clear</button>
    </body>
</html>

This example illustrates Javascript's object model of the HTML elements (i.e., the on

focus/blur events

When an element is given focus the script associated with the onfocus event is executed.

When focus is changed from an element the script associated with the onblur event is executed.

focus.html

<html>
    <head>
        <title>focus events</title>
        <script>
            function disp( e ) {
                var display = document.getElementById('display')
                display.value += '\n' + e
            }

            function clear_disp() {
                var display = document.getElementById('display')
                display.value = '';
            }

            function reg_events() {
	        var inp = document.getElementById( 'stuff' )
		inp.onfocus = function( e ) { disp("stuff focus: " + e) }
		inp.onblur = function( e ) { disp("stuff blur: " + e) }
	        inp = document.getElementById( 'yes' )
		inp.onfocus = function( e ) { disp("yes focus: " + e) }
		inp.onblur = function( e ) { disp("yes blur: " + e) }
	        inp = document.getElementById( 'no' )
		inp.onfocus = function( e ) { disp("no focus: " + e) }
		inp.onblur = function( e ) { disp("no blur: " + e) }
	        inp = document.getElementById( 'gototop' )
		inp.onfocus = function( e ) { disp("top focus: " + e) }
		inp.onblur = function( e ) { disp("top blur: " + e) }
            }
        </script>
    </head>
    <body onload="reg_events()">
        <a name="top"><h1>top</h1></a>
        <p><input type="text" id="stuff" tabindex=1 size="20"></p>
        <p>
            Yes: <input type="radio" name="yesno" id="yes" tabindex=2>
            No: <input type="radio" name="yesno" id="no" tabindex=3>
        </p>
        <p> <a href="#top" id="gototop" tabindex=4>goto top</a> </p>
        <p>
            <textarea rows="10" cols="40" id="display">
	    </textarea>
        </p>
	<br>
	<button onclick="clear_disp()">clear</button>
    </body>
</html>

The style of an element that receives focus is usually changed to alert the user about the current element that has focus.

keyboard events

Keyboard events are delivered to the element with the current focus. An example of dealing with keyboard events is:

keyboard.html

<html>
    <head>
        <title>keyboard events</title>
        <script>
	    function disp_clear() {
                var display = document.getElementById('display')
		display.value = ''
	    }
            function disp( m ) {
                var display = document.getElementById('display')
                display.value += m
            }
	    function f1_keypress( e ) {
		e.preventDefault()
		e.stopPropagation()
		var ch = e.charCode
		if ( ch == 0 ) {
		    ch = e.keyCode
		}
		disp( String.fromCharCode( ch ) )
	    }
	    function f2_keypress( e ) {
		var m = ""
		for ( o in e ) { 
		    m += '\n' + o + '=' + e[o]
		}
		disp( m )
	    }

            function reg_events() {
	        var f1 = document.getElementById( 'f1' )
		f1.onkeypress = f1_keypress
	        var f2 = document.getElementById( 'f2' )
		f2.onkeypress = f2_keypress
            }
        </script>
    </head>
    <body onload="reg_events()">
        <p><button id="f1" tabindex=1>focus here</button></p>
        <p><button id="f2" tabindex=2>or here</button></p>
        <p>
            <textarea rows="10" cols="40" id="display">
	    </textarea>
        </p>
	<button onclick="disp_clear()">clear</button>

    </body>
</html>

The event processing code for IE and Mozilla is different.