Google Closure - custom events in examples

Google Closure Library provides powerful handling system for managing events and listeners across browsers. Closure makes it possible to manage user-defined events too. With Google Closure Library you do not need to create your own Events system.

There are responsible classes in goog.event package. Headstones of google.event package are:

• goog.events.listen()
• goog.events.unlistenByKey(key);
• goog.events.EventTarget
• goog.events.Event
• goog.events.EventHandler

Basic use

For basic use you make do with the function goog.events.listen(). Remove listener before destroying object is very important. You do not want memory leaks in your application. But hold reference to key it is inconvenient (read more). You could also be interested in the method goog.events.listenOnce().

	var key = goog.events.listen(
	goog.dom.getElement('red-div'),
	goog.events.EventType.CLICK,
	function(e) { console.log("click") });
	var removeClickListener = function() {
	goog.events.unlistenByKey(key);
	};

view raw gistfile1.js hosted with ❤ by GitHub

Create custom event

The base event object is a goog.events.Event. If you build user defined events you will probably need to extend this class.

	goog.provide('pike.events.ViewportChangePosition');
	goog.require('goog.events.Event');
	/**
	* @param {number} oldX
	* @param {number} oldY
	* @param {number} x
	* @param {number} y
	* @constructor
	* @extends {goog.events.Event}
	*/
	pike.events.ViewportChangePosition = function(oldX, oldY, x, y, viewport){
	goog.events.Event.call(this, pike.events.ViewportChangePosition.EVENT_TYPE, viewport);
	this.oldX = oldX;
	this.oldY = oldY;
	this.x = x;
	this.y = y;
	};
	goog.inherits( pike.events.ViewportChangePosition, goog.events.Event );
	/**
	* Event type
	* @const
	* @type {string}
	*/
	pike.events.ViewportChangePosition.EVENT_TYPE = "changeposition";

view raw gistfile1.js hosted with ❤ by GitHub

Create event target

An EventTarget is an object that can dispatch events. The most common example of an EventTarget is a DOM element but you can define your own EventTarget by inherit from class goog.events.EventTarget. You could also be interested that goog.events.EventTarget extends goog.Disposable. The object responsible for release object reference such as DOM nodes, COM object and register listeners. Subclass of goog.events.EventTarget can register listeners and dispatch events.

	goog.provide('pike.core.Viewport');
	goog.require('goog.events');
	goog.require('goog.events.EventTarget');
	/**
	* Creates a new Viewport.
	* @param {number} width
	* @param {number} height
	* @constructor
	* @extends {goog.events.EventTarget}
	*/
	pike.core.Viewport = function( width, height ){
	goog.events.EventTarget.call(this);
	this.x = 0;
	this.y = 0;
	this.w = width;
	this.h = height;
	};
	goog.inherits(pike.core.Viewport, goog.events.EventTarget);
	/**
	* Set size of Viewport
	* @param {number} x
	* @param {number} y
	* @trigger {pike.events.ViewportChangePosition} event
	*/
	pike.core.Viewport.prototype.setPosition = function( x, y ){
	var oldX = this.x;
	var oldY = this.y;
	this.x = x;
	this.y = y;
	this.dispatchEvent(new pike.events.ViewportChangePosition(oldX, oldY, this.x, this.y, this));
	};
	/**
	* Set size of Viewport
	* @param {number} width
	* @param {number} height
	* @trigger {pike.events.ViewportChangePosition} event
	*/
	pike.core.Viewport.prototype.setSize = function( width, height ){
	var oldW = this.w;
	var oldH = this.h;
	this.w = width;
	this.h = height;
	this.dispatchEvent( new pike.events.ViewportChangeSize(oldW, oldH, this.w, this.h, this) );
	};

view raw gistfile1.js hosted with ❤ by GitHub

Manage listeners

Subclass of goog.events.EventHandler is useful in the release of listeners. After calling method dispose() it release all references to listeners. You can combine it with class goog.Disposable as mentioned bellow.

	goog.provide('pike.Entity');
	goog.require('goog.Disposable');
	goog.require('goog.events.EventHandler');
	/**
	* Creates a new Entity.
	* @param {number} x
	* @param {number} y
	* @constructor
	* @extends {goog.Disposable}
	*/
	pike.Entity = function( x, y ){
	goog.Disposable.call(this);
	this.x = x;
	this.y = y;
	/**
	* @type {!goog.events.EventHandler}
	* @protected
	*/
	this.handler = new goog.events.EventHandler(this);
	};
	goog.inherits(pike.Entity, goog.Disposable);
	/**
	* Set viewport listeners
	* @param {pike.core.Viewport} viewport
	*/
	pike.Entity.prototype.setViewportListeners = function(viewport){
	this.handler.listen( viewport, pike.events.ViewportChangePosition.EVENT_TYPE, goog.bind(this.onViewportChange_, this));
	this.handler.listen( viewport, pike.events.ViewportChangeSize.EVENT_TYPE, goog.bind(this.onViewportChange_, this));
	};
	/**
	* It responds to change of Viewport
	* @param {pike.events.ViewportChangePosition} e
	* @private
	*/
	pike.Entity.prototype.onViewportChange_ = function( e ){
	console.log( e );
	};
	/**
	* Destroy a entity
	*/
	pike.Entity.prototype.destroy = function(){
	this.dispose();
	};
	/** @inheritDoc */
	pike.Entity.prototype.disposeInternal = function() {
	pike.Entity.superClass_.disposeInternal.call(this);
	this.handler.dispose();
	};

view raw gistfile1.js hosted with ❤ by GitHub