élément HTML, personnalisé client événement

Question

J'ai un contrôle composite qui émet HTML qui ressemble à ceci

<span id="myControl"> 
    <select id="myControl_select"> 
     <option value=""></option> 
     <option value="1">Item 1</option> 
     <option value="2">Item 2</option> 
    </select> 
</span> 

Je souhaite que le contrôle de la durée de parent pour déclencher un événement lorsque le contenu liste déroulante onchange événement se déclenche. Comme il est un contrôle composite, je dois permettre à un consommateur de ce contrôle pour pouvoir attribuer le gestionnaire d'événements (j'espérais par un attribut HTML appelé OnValueChanged ou quelque chose)

---

editted à intégrer la suggestion de bobince. Le seul problème est que le paramètre argument n'est pas passé. C'est actuellement 'indéfini'.

<script> 
    window.onload = function() { 
     var objSelect = document.getElementById('myControl_select') 

     if (objSelect.attachEvent) 
      objSelect.attachEvent("onchange", myControl_ddlOnChange); 
     else if (objSelect.addEventListener) 
      objSelect.addEventListener("onchange", myControl_ddlOnChange, false); 
    } 

    function myControl_ddlOnChange() 
    { 
     //fire span on value changed event 
     var target= document.getElementById('mycontrol'); 
     var handler= target.getAttribute('onvaluechanged'); 

     var args = { text : 'Hi!', index : 0 } 

     if (handler)  
      new Function(handler).call(target, args); 
    } 

    function myControl_ValueChanged() 
    { 
     alert(arguments[0]); 
    } 
</script> 

<span id="myControl" onvaluechanged="myControl_ValueChanged();"> 
    <select id="myControl_select"> 
     <option value=""></option> 
     <option value="1">Item 1</option> 
     <option value="2">Item 2</option> 
    </select> 
</span> 

Answer 1

N'utilisez pas attachEvent, c'est uniquement IE. Vous pouvez pirater des solutions qui utilisent soit attachEvent sur IE ou addEventListener sur d'autres navigateurs, ou utiliser un cadre qui fait déjà pour vous, mais pour vos besoins, propriétés de gestionnaire d'événement ordinaire devrait être suffisant:

document.getElementById('myControl_select').onchange= myControl_ddlOnChange; 

Ce n'est pas vraiment une bonne idée de commencer à ajouter vos propres attributs HTML onsomething personnalisés. En plus d'être invalide, le navigateur n'utilisera pas cette magie pour transformer un attribut HTML onclick en une propriété JavaScript onclick. Il faudrait le faire manuellement, comme le tir:

var target= document.getElementById('myControl'); 
var handler= target.getAttribute('onvaluechanged'); 
if (handler) 
    new Function(handler).call(target); 

Il est généralement préférable d'avoir l'appelant écrire à « onclick » avec eux-mêmes une fonction JavaScript. Les attributs du gestionnaire d'événements HTML sont plutôt nuls et doivent généralement être évités.

ETA re commentaire:

La raison pour laquelle aucun argument sont transmis est parce que votre gestionnaire d'événements:

onvaluechanged="myControl_ValueChanged();" 

ne passe pas sur les arguments. On pourrait dire:

onvaluechanged="myControl_ValueChanged(arguments[0]);" 

ou, pour transmettre un certain nombre d'arguments:

onvaluechanged="myControl_ValueChanged.apply(this, arguments);" 

Mais vraiment cela se éloigner de la façon dont les gestionnaires d'événements fonctionnent normalement, car ils n'ont pas d'arguments (*). Beaucoup plus facile de simplement coller avec JavaScript et dire:

var control= document.getElementById('myControl'); 

// to register 
// 
control.onvaluechanged= myControl_ddlOnChange; 

// to call 
// 
control.onvaluechanged(/* any arguments; 'this' inside ddlOnChange is the control */); 

plutôt que cette curieuse fonction.

Autres lentes mineures: addEventListener prend 'change' plutôt que 'onchange'; C majuscule dans getElementById ('myControl'). (*: À l'exception de l'argument 'événement', en non IE)