HTML 元素，自定义客户端事件

Question

我有一个复合控件，它发出的 HTML 看起来像这样

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

我希望父跨度控件在包含的下拉列表 onchange 事件触发时触发一个事件。由于这是一个复合控件，我必须允许该控件的使用者能够分配事件处理程序（我希望通过一个名为 onvaluechanged 的​​ html 属性或其他东西）

---

已编辑以纳入 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 上使用 attachEvent 或在其他浏览器上使用 addEventListener 的解决方案，或者使用已经为您执行此操作的框架，但出于您的目的，纯事件处理程序属性就足够了：

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);

通常最好让调用者自己使用 JavaScript 函数写入“onclick”。 HTML 事件处理程序属性非常糟糕，通常应该避免使用。

ETA 重新评论：

没有传递参数的原因是因为您的事件处理程序：

onvaluechanged="myControl_ValueChanged();"

不传递任何参数。你可以说：

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

或者，传递任意数量的参数：

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

但这实际上与事件处理程序的正常工作方式有所不同，因为它们没有参数（*）。坚持使用 JavaScript 并说：

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

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

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

而不是这种奇怪的 Function 东西。

其他小细节：addEventListener 采用 'change' 而不是 'onchange'； getElementById('myControl') 中的大写 C。

(*: 除了'event'参数，在非IE中)