This Lightweight JS code is intended to solve problems with DOM Events while developing large scale applications, in order to Manage JavaScript DOM events.
- Testable!
- Objects are accessible from outside of the handler.
- Straight forward approach for triggering events over elements.
- Trigger a specific handler.
- Easy to manage lambda expressions.
- Return value is object that is instance of UIElement
- Check the return value for htmlElement, handler, and configuration on general
- Assign the return value to an object property or variable to assume control over it
- Use .trigger('EvtName'); when accessing the DOM element or over the variable from point 3.
- Trigger events by their names
- Events are attached by unique given name (by the programmer), thus lambdas are no longer anonymous
- Use method to detach all attached events
- Allows for automation tests to be written using it's interface
- No return value
- No way to test if you succeeded in attaching your event without actually performing it
- No way accessing an 'event' object from outside the handler
- Workarounds for triggering events over elements
- No way of triggering only specific handler attached to the same event type on the same element
- Hard to manage lambda expressions
- No way to detach all event handlers
- No good way to do automation testing
- JavaScript ES5 Strict
- No dependencies to any library
- Class like structure, returns objects of it's type with interface to control them
UIElement({
//mandatory
name: {STRING} - name of event
htmlRef: {HTMLElement} - one element passed by reference
handler: {FUNCTION} - passed by reference or just lambda
type: {STRING} - event type
//optional
useCapture: {BOOL} - 'false' || 'true'
context: {OBJECT} - 'this' || passed custom context
});
var htmlRef = document.getElementById('myElement');
UIElement({
name: 'My event',
htmlRef: htmlRef,
handler: function(){alert('it works')},
type: 'click'
});
htmlRef.events // returns object with attached events as properties
htmlRef.hasEvent(EVENT NAME); // HANDLER or false
htmlRef.detach(EVENT NAME); // detaches the requested event
htmlRef.detach(); // detaches all events
htmlRef.trigger(EVENT NAME) // calls the handler
var foo = new UIElement({
name: 'My event',
htmlRef: htmlRef,
handler: bar,
type: 'click'
});
function bar(){
this.eventConfig // {context, handler, htmlRef, name, type, useCapture}
this.detach() // detaches self
this.detach('name') // detaches other event
this.trigger() // triggers self
this.trigger('name') // triggers other event
//this will work as well
this.eventConfig.htmlRef.hasEvent(EVENT NAME); // HANDLER or false
this.eventConfig.htmlRef.detach(EVENT NAME); // detaches the requested event
this.eventConfig.htmlRef.detach(); // detaches all events
this.eventConfig.htmlRef.events; // returns object with attached events as properties
this.eventConfig.htmlRef.trigger(EVENT NAME); // calls the handler
}
These are going to work as well:
foo.detach();
foo.detach('name');
foo.trigger();
foo.trigger('name');
foo.eventConfig;
foo.eventConfig.htmlRef.hasEvent(EVENT NAME);
foo.eventConfig.htmlRef.detach(EVENT NAME);
foo.eventConfig.htmlRef.detach();
foo.eventConfig.htmlRef.events;
foo.eventConfig.htmlRef.trigger(EVENT NAME);