Архитектура расширяемого приложения javascript

кусок моего кода для примера. методы copy() и removeElement() дописал сам к классу Array, но, думаю для демонстрации сути не суть.

...
        var bind = null

	this.listeners = {Start: [],
				   Pause: [],
				   Stop: []}

        this.init = function()
        {
		bind = this
		for ( key in this.listeners )
		{
			(function(key)
			{
				bind["on" + key] = function(event)
				{
					var listeners = bind.listeners[key].copy()
					for ( var i = 0; i < listeners.length; i++ )
					{
						listeners(event)
					};
				}
			})(key)
		}
        }

	this.addEventListener = function(event, callback)
	{
		if ( this.listeners[event] )
			this.listeners[event].push(callback)
	}
	this.removeEventListener = function(event, callback)
	{
		if ( this.listeners[event] )
			this.listeners[event].removeElement(callback)
	}
	this.fireEvent = function(event)
	{
		if ( typeof(this["on" + event]) == "function" )
		{
			var eventObject = {type: event,
							   target: bind}
			this["on" + event](eventObject)
		}
	}
...

можно узнать, как этим пользоваться?

допустим, у меня есть

1 Редактор

2 Кнопка в редакторе

Как мне назначить кнопке определенные обработчики событий ? Как вообще должно функционировать приложение, созданное в таком стиле?

Какая последовательность действий при создании объекта ?

каких событий, для примера?

Например, у меня есть

Редактор (DIV 500x500)

Картинка (вне DIV'a)

Я могу перетаскивать картинку по всей странице, но если она над Редактором, то редактор должен получить событие mouseup картинки.

Как это можно реализовать в вашем шаблоне ?