Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Native browser and custom events

Methods

addListener

Adds an event listener to an object (e.g. a DOM Element or Glow widget).

Synopsis

glow.events.addListener(attachTo, name, callback, context);

Parameters

attachTo
Type
String | NodeList | Object

The object to attach the event listener to.

If the parameter is a string, then it is treated as a CSS selector and the listener is attached to all matching elements.

If the parameter is a glow.dom.NodeList, then the listener is attached to all elements in the NodeList.

name
Type
String

The event name.

Listeners for DOM events should not begin with 'on' (i.e. 'click' rather than 'onclick')

callback
Type
Function

The function to be called when the event fires.

context
Type
Object
Optional
Yes

The execution scope of the callback.

If this parameter is not passed then the attachTo object will be the scope of the callback.

Returns

Number | Undefined

A unique identifier for the event suitable for passing to glow.events.removeListener. If an empty NodeList or CSS selector that returns no elements is passed, then undefined is returned.

Description

Some non-standard dom events are available:

mouseenter
Fires when the mouse enters this element specifically, does not bubble
mouseleave
Fires when the mouse leaves this element specifically, does not bubble

Example

glow.events.addListener('#nav',  'click', function () {
  alert('nav clicked');
});

glow.events.addListener(myLightBox, 'close', this.showSurvey, this);
fire

Fires an event on an object.

Synopsis

glow.events.fire(attachedTo, name, event);

Parameters

attachedTo
Type
Object

The object that the event is associated with.

name
Type
String

The name of the event.

Event names should not start with the word 'on'.

event
Type
Object | glow.events.Event
Optional
Yes

An event object or properties to add to a default event object

If not specified, a generic event object is created. If you provide a simple object, a default Event will be created with the properties from the provided object.

Returns

Object

The event object.

Example

// firing a custom event
Ball.prototype.move = function () {
  // move the ball...
  // check its position
  if (this._height == 0) {
    var event = glow.events.fire(this, 'bounce', {
      bounceCount: this._bounceCount
    });
    
    // handle what to do if a listener returned false
    if ( event.defaultPrevented() ) {
      this.stopMoving();
    }
  }
};
// listening to a custom event
var myBall = new Ball();

glow.events.addListener(myBall, "bounce", function(event) {
  if (event.bounceCount == 3) {
    // stop bouncing after 3 bounces
    return false;
  }
});
removeAllListeners

Removes all listeners attached to a given object

Synopsis

glow.events.removeAllListeners(detachFrom);

Parameters

detachFrom
Type
String | glow.dom.NodeList | Object | Object[]

The object(s) to remove listeners from.

If the parameter is a string, then it is treated as a CSS selector, listeners are removed from all nodes.

Returns

glow.events

Example

glow.events.removeAllListeners("#myDiv");
removeListener

Removes listener(s) created with addListener

Synopsis

glow.events.removeListener(ident);

Parameters

ident
Type
Number | Number[]

An identifier or array of identifiers. Idenftifiers are returned from glow.events.addListener.

If array of identifiers is provided, each listener specified will be removed.

Returns

Example

var listener = glow.events.addListener(...);
glow.events.removeListener(listener);

Classes

Event

Object passed into all events

Documentation generated by JsDoc Toolkit 2.1.0 on Thu Jul 07 2011 12:47:28 GMT+0100 (BST)

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.