Implementing Event Delegation and Custom Events in JavaScript Using JQuery & Prototype.js

Events play a very vital role in developing a dynamic UI. Events are generated as a response to an User Action  or to state changes in the Event source. An Event source is the one which notifies that the user has done some action . An Event Listener is the one which waits for notification from Event source and does Event Handling .

Event Delegation

Nowadays, event binding is done completely using Javascript to make it unobtrusive. In this approach event handlers are bound to the respective element when the DOM elements are loaded. One of the problems with this approach is the loss of event handlers when the DOM structure changes. Some of the use cases where traditional event binding is not useful are:

1) Consider a Div element in the document , to which an event handler is bound . if this Div element is removed at the later stages and added again. the event handler will be lost.

2) Binding an event handler to the element, which is going to be added to the document dynamically in later stages.

This opens the door to a new way of event binding, which is called Event Delegation. Events traverse in the document in two phases which are

1)Capturing Phase:
In this Phase, events will traverse from top most element to the element on which the event has occurred.

2)Bubbling Phase:
In this Phase, events will traverse from the element on which the event has occurred to the top most element in the document.

So, its enough to add event handler to the top most element and identify the element on which event has occurred. To identify the element on which the event has occurred, the following Event methods are used

event.Target; //for firefox

event.srcElement; //for IE

The general idea with Event Delegation is to have just one (or a few) events on elements far higher up in the HTML hierarchy, and from there, trace on what target element the event actually occurred, and then take appropriate action. Let’s explore the API present in the Javascript libraries that support Event Delegation.

Event Delegation Using Prototype.js

Prototype Introduced the following API, to achieve Event Delegation.

$(element).on(eventType,context selector,handler);

Event Delegation Using JQuery.js

Initially, JQuery Introduced the following API, to achieve Event Delegation.

$.live(eventType,handler);

However , the live API method had some performance drawback. since one needs to wait for the event to traverse to the top most element of the document.It has no support for method chaining, to solve this, Delegate API was introduced, Delegate lets us bind the event handler to the nearest parent element

$.delegate(context selector,event Type,handler)

Custom Events

As Browser supports Document Object Model (DOM) , it supports DOM Events. When a user does any interaction on any DOM element,a DOM  event is triggered by the browser and  Event Listener gets notified.An example of this is a “click” event. whenever a user performs “click” action on the element , the click event is triggered and will notify the Listener, where a event handler function can be added .

Limitation of the DOM Events

Since DOM events are very limited in number, we need Custom Events. Consider  the simple use case of adding an event listener for hide, this is difficult to do as there is no DOM event called “hide”.

Custom Events are simple to create and a utility method can be written to handle it. In my experience some of the points to consider while writing an utility function are:

a) Store Custom Event created.
b) Attach the Event Listener to the Event
c) Trigger the Event Listener, when the Event occurs.

Following is the code which allows the user to create a Custom Event and does support above mentioned points.

An utility Function containing a variable to store the list of events.

function Event(){
this.events = {};
}

An observe method is added, which binds the event listener with event source. this observe function takes three parameters

i)DOM element on which the event has occurred

ii)Event type which has occurred

iii)Event handler function, which does the event handling

Event.prototype.observe = function(el,evt,handler){
var isDomEvent = checkDomEvent(evt);
if(typeof evt != undefined && typeof evt == "string" ){
if(isDomEvent){
if(el.addEventListener){
el.addEventListener(evt,handler,false);
}else{
el.attachEvent("on"+evt,handler);}
}else{
if(this.events[evt] instanceof Array){
this.events[evt].push(handler);
}else{
this.events[evt] = [handler];
}}}}

A fireEvent method , to fire the event manually and notify the handler

Event.prototype.fireEvent = function(el,evt){
for(var i=0,j=this.events[evt].length;i)
try{
this.events[evt][i](this);
}catch(e){
continue;
}
}}

The following Link Contains simple Demo, which uses above created utility function and support Custom Events http://uiengineer.com/test.html

As shown in the Demo,on clicking the “show” button, Green Color Message Box  is Shown . Message Box is bound with two Custom Events“show” and “hide”. when the Message Box is shown , the “show” event is fired using the Event.fireEvent() method , a Brown Color box is shown .similarly on pressing the hide button, the Message Box gets hidden and the “hide” event is fired using the Event.fireEvent() method, where one more brown color box is shown.

This is a bare-bones  implementation of custom event, which will need a lot of enhancement for production use. But, we don’t need to make them as there are many Javascript libraries, which have already done this. Let us explore some of these libraries.

Custom Events Using Prototype.js

A custom event can be added using the following API

Element.observe(“custom:event”,Handler);

However in prototype, Custom Event Name should  contain Colon . for example, “show” event should be named as custom:show and “hide”event should be named as custom:hide .To fire the  Custom Event, we can use

Element.fire(“custom:event”);

The following link contains the demo of previously mentioned example, that can be achieved using the prototype http://uiengineer.com/testprototype.html

Custom Events Using JQuery

Following is the API to add the custom event using JQuery

Element.bind(“custom event”,handler);

custom event is fired  using the following API

Element.trigger(“custom event”);

The following is the demo of  previously mentioned example, that can be achieved using the JQuery http://uiengineer.com/testjquery.html
Be Sociable, Share!

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)