HTML要素、カスタム・クライアント・イベント

Question

は私が含まれているが、イベントが発生ONCHANGEドロップダウンリスト際にイベントを発生するために、親スパンコントロールをしたいと思います

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

次のようになりますHTMLを発する複合コントロールを持っています。これは複合コントロールですので、私は、このコントロールの消費者は、イベントハンドラ（私はonvaluechangedか何かと呼ばれるHTML属性を経由して期待していた）

---

Editted bobinceの提案を組み込むことを割り当てることができるように許可する必要があります。唯一の問題は、引数のパラメータが渡されていないことです。現在、「未定義」です。

<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

attachEventは使用しないでください。IEのみです。あなたは他のブラウザにIEかのaddEventListenerにattachEventのいずれかを使用するソリューションをハック、または既にあなたのために、しかし、あなたの目的のために、プレーンなイベントハンドラのプロパティが十分でなければならないことないフレームワークを使用することができます。

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

それはありません独自のカスタムHTML onsomething属性を追加することをお勧めします。無効であることは別として、ブラウザはonclick HTML属性をonclick JavaScriptプロパティに変換する魔法を実行しません。あなたは次のように発射、手動で行う必要があるだろう：

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

それは「のonclick」JavaScriptを使用して、発信者への書き込みが自分自身を機能持っていることが一般的に良いでしょう。 HTMLのイベントハンドラの属性はかなり吸うので避けるべきです。

ETAの再コメント：

イベントハンドラので、引数が渡されていないされている理由は次のとおりです。

onvaluechanged="myControl_ValueChanged();" 

は、任意の引数に渡すことはありません。

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

しかし、彼らは、引数（*を持っていないので、本当にこれは、離れてイベントハンドラが正常に動作する方法からなっている：

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

または、任意の数の引数を渡すために：あなたは言うことができます）。 JavaScriptを使用するだけで、この好奇心が強い機能ではなく、

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

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

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

というよりもはるかに簡単です。

その他のマイナーニット：addEventListenerは 'onchange'ではなく 'change'を使用します。 getElementById（ 'myControl'）の大文字のCです。

（*： 'IE'以外の 'event'引数を除く）