method ON vs OBSERVE

[Miguel Beltran R.]

Using prototype 1.7 I try to figure what is better, the new ON method or OBSERVE method but the only thing I found is that ON is better if you wish use an CSS selector and/or stopObserve

am I correct? or observe is going to be deprecated?



--
________________________________________
Lo bueno de vivir un dia mas
es saber que nos queda un dia menos de vida

[T.J. Crowder]

Hi,

On Oct 11, 3:13 pm, "Miguel Beltran R." <yourpa...@gmail.com> wrote:
> Using prototype 1.7 I try to figure what is better, the new ON method or
> OBSERVE method but the only thing I found is that ON is better if you wish
> use an CSS selector and/or stopObserve
>
> am I correct? or observe is going to be deprecated?

`on` is just like `observe` if you don't pass it a filtering selector
(except that it's more indirect; it eventually ends up calling
`observe` under the covers), but I can't imagine `observe` is going to
be deprecated. Both have mechanisms for stopping event handlers. With
`on` you stop it by calling `stop` on the `EventHandler` object it
returns to you; with `observe` you call `stopObserving` with the same
arguments you gave `observe` (or fewer, if you want to have a broader
effect). The claim is that `on` is useful because you don't have to
remember the event handler function if you need to stop it later, but
since you have to remember the `EventHandler` instance `on` returns to
you, I'm not seeing any net benefit in that sense. `on`'s real use is
event delegation IMHO.
--
T.J. Crowder
Independent Software Engineer
tj / crowder software / com
www / crowder software / com

[Miguel Beltran R.]

2011/10/12 T.J. Crowder <t...@crowdersoftware.com>

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Thanks T.J.

I was a little worried about if ´observe´ could be deprecated

[clockworkgeek]

I find IE doesn't bubble it's field-related events properly so you
still need to use `observe` for those cases. As a fix I suppose 'on'
could search it's children for fields and manually apply `observe` on
those but it wouldn't be ideal, dynamically added fields would be
exempt.

[T.J. Crowder]

On Oct 16, 2:45 pm, clockworkgeek <nonproffessio...@clockworkgeek.com>
wrote:

IE doesn't bubble `focus` or `blur`, but it does bubble the IE-
specific `focusin` and `focusout` events. jQuery maps `focus` to
`focusin` (and similarly for `blur`/`focusout`) in its event
delegation stuff. I think that would be a better way to go.

[Victor]

Here is the code (borrowed from some project) I'm using for bubbling focus and blur events:

/**
 * Bubbling focus:in and focus:out events.
 * Usage:
 *   document.on("focus:in", selector, focusHandler); // on focus
 *   document.on("focus:out", selector, blurHandler); // on blur
 */
(function() {
  // custom stripped version of Event.findElement
  function element(event) {
    //var node = Event.extend(event).target;
    var node = event.target || event.srcElement;
    return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
  }

  // custom optimized version of event firing
  var fire = document.createEvent ? (function fireDOM(element, eventName) {
    if (element == document && !element.dispatchEvent) {
      element = document.documentElement;
    }
    var event = document.createEvent('HTMLEvents');
    event.initEvent('dataavailable', true, true);
    event.eventName = eventName;
    event.memo = {};
    element.dispatchEvent(event);
  }) : (function fireIE(element, eventName) {
    var event = document.createEventObject();
    event.eventType = 'ondataavailable';
    event.eventName = eventName;
    event.memo = {};
    element.fireEvent(event.eventType, event);
  });

  function focusInHandler(event) {
    //Event.findElement(event).fire("focus:in");
    fire(element(event), "focus:in");
  }
  function focusOutHandler(event) {
    //Event.findElement(event).fire("focus:out");
    fire(element(event), "focus:out");
  }

  if (document.addEventListener) {
    document.addEventListener("focus", focusInHandler, true);
    document.addEventListener("blur", focusOutHandler, true);
  } else {
    document.observe("focusin", focusInHandler);
    document.observe("focusout", focusOutHandler);
  }
})();