0

I tried to have a title that match the context I want my answer for. I explain myself.

After writting thousand of javascript lines of code (with or without jquery) I finally asked myself if I'm doing it wrong. Mainly thanks to jQuery adding event/delegating to an element is very easy, but all the example are quiet "easy"; meaning it doesn't take into account that you have a page full of list, button, dynamic things...

So my questions, is: Once again for a complexe website, with hundred of dynamic pages, ajax navigation, millions of user...

  1. Is there any advantage (beside simplicity) to place a global listener (body or whatever) and let all events bubble up ? When I look at angular it seems they listen 'ng-click' globally, but I can missthink.

Contexte

<body>
  <div>
   <ul>
     <li><span click="myFunc"></span></li>
   </ul>
  </div>
 </body>

-

Sidenot: I'm using jQuery for presentation/simplicity, but it's global question about js

// Standard binding example
$('span').on('click', func)

vs

// Standard delegation example
$('ul').on('click', 'span', func)

vs

// Dispatcher for 'block'
$('ul').on('click', localDispatcher)

vs

// One (and only one) Global Listener for all click
$(body).on('click', globalDispatcher)

With this example, the 3 first one need to be placed manually, on a dedicated js for this page. Vs The last one is just a simple event listener, that will use click attribute to dispatch and can be set just once and for all.

I find the last one very cool, because it remove all the hassle to manage click/selector/dom management. Also I don't have to .off every listener when I change page (ajax navigation). But I wonder about performance or maybe another problems I can think about (that's why I ask the question :D). I really wonder how "big web startup" manage this kind of Javascript.

Thanks :)

h1fra
  • 324
  • 1
  • 3
  • 10
  • 3
    It's best to ask **one** question per question on Stack Overflow. Your first question is overly broad anyway, I'd suggest just removing it and leaving the second. The second may well be opinion-based, but there are objective reasons for using each style too, so... – T.J. Crowder Apr 15 '15 at 12:36
  • You are right, I change that as the first one I certainly not as "interesting" – h1fra Apr 15 '15 at 12:43
  • 3
    See https://api.jquery.com/on/ chapter `Event performance`: "For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents." – Reeno Apr 15 '15 at 12:47
  • "I really wonder how "big web startup" manage this kind of Javascript." - not by directly attaching event handlers using jQuery for sure. That's why AngularJS is successful. – Sergiu Paraschiv Apr 15 '15 at 12:52
  • @Reeno Yes, that seems logical when delegating with a selector. My last example is 'selector' less and use the attribute to launch the desirated function (as Angular syntax). Also it does not concern jQuery but js globbaly, I added a sidenote about it thx :) – h1fra Apr 15 '15 at 12:53
  • If you attach a lot of handlers on body/document then the performance on mobile will suffer. It most likely also affect desktop browsers but since the computers are so fast these days, you might not notice. – Huangism Apr 15 '15 at 12:54
  • What exactly does your `globalDispatcher` do? How many dispatchers are there? – Bergi Apr 15 '15 at 16:59

1 Answers1

1

I'd say no to a global listener since it will make things incredibly confusing and frustrating to organize once the app grows into a considerable size.
Also the performance should be really bad since you are involving elements that will be ignored otherwise.
So stick with element or block level event delegation if you want to feel good about yourself in the future!

Vijay Britto
  • 41
  • 7