#435 ✓ resolved
Radoslav Stankov

Event.delegate and Element.Methods.delegate

Reported by Radoslav Stankov | November 10th, 2008 @ 02:47 PM | in 1.7

For some time now most of the event handlers I use are event delegates. This saves me a lot of headache when I have to add / remove element, it is speedy. I saw this pattern in Lowpro and use it in my CD3.Behavoirs.

So I think that Event.delegate and Element.Methods.delegate should be in the Prototype (example of simple usage):


<div id="container">
	<a href="#" class="add_item">add Item</a>
	<ul>
		<li>Item 1</li>
		<li>Item 2</li>
		<li>Item 3</li>
	</ul>
</div>

<script>
$('container').delegate('click', {
   'li':         function(e){ alert(this.innerHTML); },
   '.add_item':  function(e){ this.next('ul').insert('<li>Item ' + ( this.next('ul').select('li').length + 1 ) + '</li>'); }
});
</script>

Comments and changes to this ticket

  • Tobie Langel

    Tobie Langel November 10th, 2008 @ 03:03 PM

    • State changed from “new” to “enhancement”

    Agreed. Not sure however about the API you suggest.

  • Tobie Langel

    Tobie Langel November 10th, 2008 @ 03:03 PM

    • Assigned user set to “Tobie Langel”
  • Juriy Zaytsev

    Juriy Zaytsev November 10th, 2008 @ 05:24 PM

    I never found it necessary to delegate from within a particular element. Instead, I use Event.delegate which observes document.documentElement:

    
    Event.observe('foo.bar:not([baz])', 'click', function(e) {
      // do stuff
    });
    

    Am I missing something?

  • Juriy Zaytsev

    Juriy Zaytsev November 10th, 2008 @ 05:25 PM

    It's also somewhat consistent with Event.observe signature (with the only difference of cssExpression used instead of an element reference or id string)

  • Radoslav Stankov

    Radoslav Stankov November 10th, 2008 @ 05:34 PM

    I mostly used delegation in widgets, I have several global delegates, but not much. If you have something like this:

    
    var Widget = Class.create({
       initialize: function(container){
          containser.delegate('click', {
              // different event on elements
          });
       },
       destroy: function(){
          containser.stopObserving();
       }
    });
    

    In this way I can control the root element of the delegation and can clear events on need.

    I have tried 2-3 types of API format like and $(element).delegate(eventName, delagateRules) was the one I liked the most.

  • Juriy Zaytsev

    Juriy Zaytsev November 10th, 2008 @ 05:52 PM

    What about:

    
    Event.delegate(cssExpression, eventName, handler[, parentElement])
    

    and Element#delegate derived from it

    
    Element.delegate = function(element, cssExpression, eventName, handler) {
      return Event.delegate(cssExpression, eventName, handler, element);
    }
    

    This way one could use either generic Event.delegate or more granular Element#delegate

    
    $(someElement).delegate('.foo', 'click', function(){});
    Event.delegate('.foo', 'click', function(){});
    

    Thoughts?

  • John-David Dalton
  • Tobie Langel

    Tobie Langel November 11th, 2008 @ 12:31 AM

    I'd rather we stay consistent with our current API:

    
      Event.delegate(element, selector, eventName, handler);
      $(someElement).delegate(selector, eventName, handler);
      document.delegate(selector, eventName, handler);
    
  • Radoslav Stankov

    Radoslav Stankov February 16th, 2009 @ 11:41 PM

    I have been working on implementation for event delegation using Element.Storage API. This is what I have created so far.

    Added API for stopDelegating (similar to stopObserving)

    Event.stopDelegating([element[, selector[, eventName[, [handler]]]); $(element).stopDelegating([selector[, eventName[, handler]]]); document.stopDelegating([selector[, eventName[, handler]]]);

    And I want to ask if events - submit / reset will be supported ( because they don't bubble with IE )

    With the simple tests, this works fine. I haven't make any unit test, I plan to them if this approach is accepted.

  • Tobie Langel

    Tobie Langel May 28th, 2009 @ 03:21 PM

    For consistency with stropObserving, stopDelegating makes more sense than stopDelegate

  • Radoslav Stankov

    Radoslav Stankov May 28th, 2009 @ 07:11 PM

    ok

    I'm really busy these days. But on Sunday I will finally try to make a patch with tests with stopDelegating and make focus/blur bubble

    p.s I'm also thinking for elegant solution about IE submit/reset event

  • Tobie Langel

    Tobie Langel July 23rd, 2009 @ 02:23 AM

    • Assigned user changed from “Tobie Langel” to “Sam Stephenson”
    • Milestone set to 1.7
  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:11 AM

    • Tag changed from element, enhancement, events to element, events, section:dom

    [not-tagged:"dom" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:12 AM

    • Tag changed from element, events, section:dom to events, section:dom

    [not-tagged:"element" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:43 AM

    • Tag changed from events, section:dom to section:dom

    [not-tagged:"events" bulk edit command]

  • T.J. Crowder

    T.J. Crowder November 16th, 2009 @ 04:50 PM

    • Assigned user cleared.

    [responsible:none bulk edit command]

  • Radoslav Stankov

    Radoslav Stankov October 18th, 2010 @ 10:04 AM

    • State changed from “enhancement” to “resolved”
    • Importance changed from “” to “Medium”

    Prototype 1.7 have Element#on method for event delegation, so I close this a resolved.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The Prototype JavaScript library.

Shared Ticket Bins

Attachments

Referenced by

Pages