Week 05: Lecture – Events | Intellectual Pirates

Lecture Demo Files

Events are specific actions that can happen on a page, which can have triggers set to invoke when hit. The simplest example of this is the onClick event. This event is triggered when someone clicks on an element in the DOM. You can attach JavaScript statements to this event in a few ways:

Inline HTML

<a href="#" onClick="alert(1); return false">Click Me</a>

addEventListener [Mozilla Docs]

     var elClickHandler = function() {
        alert('element clicked');
     }
     var el = document.getElementById("idName");
     el.addEventListener("click", elClickHandler, false);

addEvent

You can download this common.js file, which has this function among many more useful ones :)

    // this is a custom function for adding multiple handlers to events
    // http://ejohn.org/projects/flexible-javascript-events/
 
    function addEvent( obj, type, fn ) {
	if ( obj.attachEvent ) {
            obj['e'+type+fn] = fn;
	    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
	    obj.attachEvent( 'on'+type, obj[type+fn] );
        } else
            obj.addEventListener( type, fn, false );
    }
    function removeEvent( obj, type, fn ) {
	if ( obj.detachEvent ) {
	    obj.detachEvent( 'on'+type, obj[type+fn] );
	    obj[type+fn] = null;
	} else
	    obj.removeEventListener( type, fn, false );
    }
 
    // TODO: must define var foo = function(){}
    // run the function in the var 'foo' on window load
    addEvent(window, 'load', foo);
 
    // TODO: must define var bar = function(){} 
    // run the function in the var 'bar' on window load
    addEvent(window, 'load', bar);
 
    // remove bar function from the window.onLoad event
    removeEvent(window, 'load', bar);

Helper Functions

http://unixpapa.com/js/dyna.html

Event Ordering: Bubbling/Capturing

Quirksmode says it best

Keyword: this

the keyword this is a reference to the object or element that is in scope for the current script code.

Examples

<a href="javascript:alert(this);">alert this element</a>

    var Person = function(myName) {
        this.name = myName;
    }
 
    var adam = new Person('adam');
    // this.name is a reference to the adam instantiation of the person object
    alert(adam.name);
 
    var david = new Person('david');
    // this.name is a reference to the david instantiation of the person object
    alert(david.name);

Why Event Handlers?

Today’s computers and computer programs are graphics-driven and respond to user input. Before this course, you have written static Web pages, with the limited interaction of the <a> tag to access another Web page. Now we will be able to write code that will respond to user input from the mouse or the keyboard as the user is actively using these devices. This this kind of input is known as asynchronous user input. And this kind of programming is called event-driven programming.

A web browser provides a graphical environment which responds to user input and other kinds of status, such as a Web page having completed loading into the browser or that the browser window is not on top (that is, it has lost focus). In client-side JavaScript, the Web browser notifies programs of user input and various changes in status by generating events. When an event occurs, the Web browser attempts to invoke an appropriate event handler function to respond to the event. To write dynamic, interactive client-side JavaScript programs, you must define appropriate event handlers and register them with the system, so that the browser can invoke them at appropriate times.

In event-driven programming, you write a number of independent (but mutually interacting) event handlers. You do not invoke these handlers directly but allow the Web browser to invoke them at appropriate times. Since they are triggered by the user’s input, the handlers are invoked at unpredictable, asynchronous times. Much of the time, your program is not running at all but just sitting, waiting for the browser to invoke one of its event handlers.

Let’s look at the event handlers themselves. Event handlers can be classified into four types:

Window:

These events occur when the user does something affecting an entire browser window. The most common window event is just loading the window by opening a particular Web page. There are also events that trigger event handlers when windows are closed, moved, and even sent to the background.

Mouse:

Many of the user’s interactions with your pages come in the form of mouse movements or mouse clicks. JavaScript provides quite a set of handlers, from hover, mouse button down, mouse button up, to single click, double click, among others. Code will be needed to distinguish which mouse button was pressed.

Form:

These handlers are used for validating forms. From submitting or resetting a form to selecting, focusing on or blurring from an element of the form, event handlers are available to control their behaviors. These will be covered in a later lecture of Forms.

Key:

The other main input device, besides the mouse, is the keyboard. Code will be required to distinguish which key was pressed.

Event handlers in format are lower case and always begin with the letters ‘on’.

Intellectual Pirates

Week 05: Lecture – Events