Search code examples
javascriptjqueryprototypejsdelegation

delegate() in PrototypeJS


I am used to jQuery, which has a delegate() method. So let's say I have HTML like this:

<div id="covers">
   <a href="#"><img ... /></a>
   <a href="#"><img ... /></a>
   <a href="#"><img ... /></a>
   <a href="#"><img ... /></a>
   <a href="#"><img ... /></a>
   <a href="#"><img ... /></a>
   ...lots anchors here...
</div>

In jQuery, I can bind events to the parent div and not attach individual handlers to new, dynamically added anchors using delegate() like so:

$('#covers').delegate('a', 'click', function(){
   /// stuff I want to do
   var clickedAnchor = $(this);
});

What would the equivalent code be in Prototype?


Solution

  • Prototype's philosophy is that you do it more like in pure javaScript only with added cross-browser abstractions (plus releasing once a year, plus polluting native prototypes).

    So there's no delegate in Prototype. You can use Event#findElement though.

    $('covers').observe('click', function (event) {
      var link = event.findElement('a');
    
      if (link) {
          // ...
      }
    });
    

    Edit: There is delegate in Prototype: http://api.prototypejs.org/dom/Event/on/!

    $('covers').on('click', 'a', function (event, element) {
       // ...
    });