在 onChange 事件中将此对象作为参数传递？答案

【问题标题】：passing this object as argument in onChange event?在 onChange 事件中将此对象作为参数传递？
【发布时间】：2013-08-09 18:47:47
【问题描述】：

我想制作一个将“this”对象作为参数传递的事件处理程序。我试过这个

 <select id="customer" onchange="custChange(this);">

它可以正常工作并获得调用 on change 的 dom 对象。

但根据我的理解，这不应该起作用，因为第一个参数应该是“事件”（而不是“这个” 对象）在事件处理方法中，如下所示

  <select id="customer" onchange="custChange(event);">

我们可以在 eventHandler 方法中传递任何参数（this 或 event），只要它们的名称正确或第一个参数将总是被视为事件对象？

【问题讨论】：

标签： javascript onchange

【解决方案1】：

你定义了custChange，更重要的是：你正在调用它。因此，您可以自己决定它应该接受哪些参数以及接受的顺序。只有不你调用的函数，你要注意参数的顺序。

但是如果你想定义custChange使其与other ways兼容of binding event handlers，即

function custChange(event) {
    // `this` refers to the DOM element
}

然后你可以调用它

custChange.call(this, event);

【讨论】：

【解决方案2】：

我做了一个测试。

function change(){
    console.info( arguments );
}

<select name="" id="" onchange="change( this, event )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( event, this )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

<select name="" id="" onchange="change( this, e )">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
</select>

我操作上面一一选择，然后得到下面的控制台信息：

[选择，事件]
[事件，选择]
未捕获的 ReferenceError: e 未定义

所以，从结果中，我得出结论，我们必须在页面调用中传递正确的单词，并且可以改变它们的位置。

【讨论】：

【解决方案3】：

~~第一个参数永远是事件。~~

[编辑]您可以使用任何您想要的参数调用您的处理程序，event 和 this 对象在调用时可用。 event 指的是事件对象，this 指的是触发事件的 dom 对象。[/edit]

但是，在处理程序中event.currentTarget 将链接回触发事件的对象：

<script>
    function custChange(event) {
        // event.currentTarget = select element
    }
</script>
<select id="customer" onchange="custChange(event);">

【讨论】：

【解决方案4】：

你可以按照不显眼的javaScript来做：

$("#customer").on("change", function () {
    ... and here you have $(this) object linked to 'customer' select
});

【讨论】：

【解决方案5】：

也许你可以这样做：

<p><a id="link" href="#">click me</a></p>
<script>
var link = document.getElementById("link");
AttachEvent(link, "click", EventHandler);
function AttachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

我希望它有所帮助。

【讨论】：