2009-05-21 4 views
11

Est-il possible d'avoir des événements de mise au point bulle dans protoype? J'essaye d'éviter d'avoir à assigner un observateur sur chaque élément d'entrée.Créer un observateur d'événements pour focus?

<script language="javascript" type="text/javascript"> 
document.observe('dom:loaded', function() { 

    // Doesn't work 
    $('editForm').observe('focus', function(evnt){ 
     console.log('FOCUS!'); 
    }); 

    // Works 
    $('editForm').select('INPUT').each(function(elem) { 
     elem.observe('focus', function(evnt){ 
      console.log('FOCUS!'); 
     }); 
    }); 

}); 
</script> 

<form method="post" name="editForm" id="editForm" action=""> 
<input type="text" name="foobar" /> 
</form> 

Répondre

24

Les événements de mise au point et de flou n'émettent pas de bulles.

Vous pouvez déclencher un gestionnaire d'événements pendant la phase de capture. Lorsque vous utilisez des méthodes DOM standard, vous devez écrire

document.addEventListener('focus',function(e){/*some code */}, true); 

la valeur "true" est ici la plus importante. Le problème est que IE ne prend pas en charge la phase de capture de la propagation d'événements, mais pour IE, vous pouvez utiliser les événements focusin et focusout qui, contrairement aux événements de focus et de flou, font des bulles. Je recommande de lire un article sur ce sujet écrit par Peter Paul Koch. D'autres navigateurs (Firefox, Opera, Safari) probablement (je ne l'ai pas testé) supportent des évènements comme DOMFocusIn, DOMFocusOut qui sont des équivalents pour les évènements focusin et focusout d'IE.

+0

si (_is_ie) {// \t IE se concentre uniquement/écouteurs d'événements flou \t de f.observe ('focusIn', ce .onFocus.bind (this)); \t f.observe ('focusout', this.onBlur.bind (this)); } else {// \t Firefox et événement focus/flou Safari auditeurs \t \t \t \t f.addEventListener ('focus', this.onFocus.bind (cela), true); \t f.addEventListener ('blur', this.onBlur.bind (this), true); } Ensuite, à l'intérieur de onBlur et onFocus, j'obtiens l'élément (Event.element) et je vérifie son nodeName pour voir si je devrais faire quelque chose. –

4

Vous pouvez utiliser ceci:

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

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

document.observe('focus:in', function(event) { 
    // Your code 
}); 

Mon jsFiddle: http://jsfiddle.net/EpokK/k7RPE/3/