{Carrer web log} ←

Event Delegation - JavaScript

Monday, May 23, 2011 { 6 Comments }

I'm making a small JS library for building mobile apps that should work on webkit browsers Safari, Chrome. One of the problems to solve was how to implement event delegation.

What is event delegation? I think that very good explanation has David Walsh on his blog post about event delegation and the explanation how various libraries implement event delegation.

So if you are using jQuery you probably know .delegate() and .live() method. Basically what you trying to achieve is to have just one addEventListener that covers big area like the body, table or other portion of your code and avoid to have multiple addEventListener's. I think the .live() method in jQuery have one addEventListener positioned on the body HTML element.

My intention was to build simple yet flexible solution that will work on all modern browsers.

The basic code is:



And the final function:

The trick is to check if the selected("event.target") element matches the selection array($("something")) by using the indexOf .



In order this solution to work you need to remember to select the deepest HTML elements: Example <div id="some"><span><a href="">Click Me</a></span></div> you should indicate in the SelectorChild $("#someid>span>a");


All of this is possible because is the modern browsers we can querySelectorAll and actually the SelectorEngine can be just one line of code.

See working example of first and second example:

FirstExample
SecondExample

I did tests on Firefox4, Safari5, Chrome13, Opera11 and mobile Safari on IOS4.3 .

I think that many heads are better than one. Help me improve the code. Just one condition it should work on Safari and Chrome.

The code can be found on GitHub:

https://gist.github.com/985999
https://gist.github.com/986000

Thanks.

6 Responses to “Event Delegation - JavaScript”

1. //  Colin Helvensteijn // 5/23/2011

   If it's only supposed to work in WebKit, you don't even need to select elements to compare against in the delegate handler. You can just use the webkitMatchesSelector() method on the target element instead.  

2. //  Vladimir // 5/23/2011

   @raptor:
   Thanks! Nice suggestion!
   I actually wasn't familiar with mozMatchesSelector and webkitMatchesSelector and it definitely can be useful for selector matching.  

3. //  Unknown // 5/23/2011

   You could do that, or make it very simple using jquery and fire a function rather then events if you need it quick and simple:
   
   $('a').click(function(){
   switch($(this).attr('id')) {
   case 'draggable':
   // dispatch dragging event
   dispatchEvent(initTouchEvent(bla, bla, bla));
   break;
   }
   });
   
   Then add universal event listener(s) once so any object that dispatch's an event will have a universal event listener rather then an event listener for every object, switch it through a function to specifically target what you want to do with the type of event dispatched, and voila less complicated, organized, leaner, faster running code.
   
   document.addEventListener('touchStart', touchEventHandler, false);
   document.addEventListener('touchEnd', touchEventHandler, false);
   
   function touchEventHandler(event) {
   switch (event.type) {
   case 'touchStart':
   // do something based on the current object dispatching the event
   break;
   }
   
   Technically you don't need to dispatch an event (first example of jquery), since every time you touch/gesture the screen you are dispatching an event and just need to grab specific data of what you're touching in order to do something. Which you pass it through your fuction handler that determines what you did, and fires functions/code to do what you want with what you touched.  

4. //  Vladimir // 5/24/2011

   @Billangelo: Thanks for the comment.
   
   I thought to implement in the future multiple event.type like jQuery does, something like:
   
   
   if (e.type == 'mouseover') {
   ..do something
   }
   
   if (e.type == 'click') {
   ..do something
   }
   
   or use switch/case logic  

5. //  Anonymous // 5/24/2011

   "projecting" means to stick out, suspect you mean project managing so why not say that!  

6. //  Vladimir // 5/24/2011

   @Anonymous: Thanks for the tip.
   
   I wanted to say building, making, construct. I thought that building a project = projecting. I will update the post.  

Post a Comment

<< Home