Forum: Rails Spinoffs (closed, excessive spam) Prototype - Event.observe by TagName instead of by Element.

Hello,

I would to know if there is a way to be triggered on an event
for all elements of a given type (for example "INPUT")

In my case, I would like to register a method which will be
called when the onfocus events is triggered on any INPUT
without having to register it explicitly on all INPUTs

Regards,

Oni

$$('input,textarea').invoke('observe', 'focus', function(event) {
  ...
});

or event deligation:
$(document.body).observe('focus', function(event){
  var element = event.element();
  if ( !/^(input|textarea)$/.test(element.tagName) ) return;

  //code here
});

 - JDD

Hello,

Thanks for your answer, but :

- First solution does not work in my case since new INPUT can be added
dynamically to the document.
- Second solution does not work when i try.

In fact what i need would be something like that (I know the following
code is not valid) :

  Element.addMethods('input', {
    initialize: function(element) {
      // do some initialization for any inputs ...
    },
    onblur: function(element) {
      // do something for any inputs on blur ...
    },
    onfocus: function(element) {
      // do something for any inputs on focus...
    },
    // etc
  });

On Jul 9, 2008, at 9:55 AM, jdalton wrote:

> $(document.body).observe('focus', function(event){

Does this really bubble in IE? I have had trouble with 'change' not
bubbling, and wonder if the same problem would follow on focus.

Thanks,

Walter

focus doesn't bubble.

That's true, but even if it had bubbled that would not have solved my
problem :-)

On Wed, Jul 9, 2008 at 10:50 AM, onitsuka <onitsuka42@gmail.com> wrote:
>
> That's true, but even if it had bubbled that would not have solved my
> problem :-)

It would absolutely solve your problem! In your original post, you
said, "I would like to register a method which will be called when the
onfocus events is triggered on any INPUT without having to register it
explicitly on all INPUTs". That is a perfect example of what event
delegation can do.

Unfortunately, the fact that onfocus doesn't bubble is what renders it
useless for your situation. If you were capturing clicks or
mouseovers, though, you'd be set.

:Dan

As a detailed, what i need is that :

        Element.addMethods('input', {
                initialize: function(element) {
                        // do some initialization for any inputs ...
                },
                onblur: function(element) {
                        // do something for any inputs on blur ...
                },
                onfocus: function(element) {
                        // do something for any inputs on focus...
                },
                // etc
        });

I need to be triggered to onBlur and onFocus for all inputs, but i
also need to perform additional initialization at input creation.

Ahh now I remember where I saw event deligation for blur and focus
(works in IE too) :)
http://ajaxian.com/archives/event-delegation-for-b...
http://www.quirksmode.org/focusblurexample.html

Here is a test I did of this for Prototype back in April 08:
http://pastie.org/pastes/186221 (uses onfocusin and onfocusout)

- JDD

Thanks, that's interesting, but still not what i'm looking for.

Hahah I guess I misunderstood what you wanted :)
This would allow you to perform an action when any INPUT element is
focused,
even if added to the document at a later time.

- JDD

I still don't understand what the problem is...

-- kangax

ok i'll try to re-explain it :

I would like to extend the class "INPUT" to add specific behaviors for
all INPUTs already in the loaded document or which will be added later
dynamically to the document.
I want to add custom behaviors at INPUTs initialization, INPUTs focus
and INPUTs blur (out of focus).

So I imagined there was a way to do this once for all thanks to
prototype Object.extend(...)

Object.extend does nothing but adds properties to an object : )
Element.addMethods, on the other hand, allows you to "inject" set of
methods into element "definitions" (of certain type).
These "injected" methods then become available on elements implicitly
(in some browsers like FF, Safari, etc.) or explicitly (e.g. in IE,
where an element needs to be first extended).
Prototype doesn't have any predefined way of intercepting element
creation (or "initialization" as you call it) as well as insertion or
modification.
You need to "initialize inputs" manually - attach event handlers,
change style, etc.

It's possible that later versions of prototype will fire custom events
before/after some methods' calls (e.g. "element:updated",
"element:inserted", "element:removed").

Best,
kangax

Thanks kangax, that's what I had to know !
So right now, I don't see any solution to my issue but to add the
behaviors explicitly to all inputs I create.