在onChange事件中将该对象作为参数传递？

Question

我想创建一个事件处理程序，将“this”对象作为参数传递。我尝试过这个：

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

它可以很好地工作，并获取触发onchange事件的DOM对象。

但是根据我的理解，这不应该起作用，因为事件处理程序方法中第一个参数应该是“事件”（而不是“this”对象），例如以下代码：

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

如果它们的名称正确，我们是否可以在eventHandler方法中传递任何参数（这个或事件），或者始终将第一个参数视为事件对象？

- emilly

Answer 1

"You"定义了 custChange ，更重要的是： "你"正在调用它。 因此，您可以自行决定它应该接受哪些参数以及其顺序。 仅对于您没有调用的函数，您需要注意参数的顺序。

但是，如果您想定义 custChange ，使其与其他绑定事件处理程序的方式（即高级事件处理技术）兼容，则需要注意其兼容性。"

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

然后你可以这样调用它

custChange.call(this, event);

- Felix Kling

Answer 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>

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

• [选择器，事件]
• [事件，选择器]
• 未捕获的引用错误：e未定义

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

- Zhang Yang

Answer 3

第一个参数将始终是事件。

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

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

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

- Thierry J.

Answer 4

你可以根据不显眼的JavaScript来实现：

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

- Sergio

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

希望能对您有所帮助。

- ZaoTaoBao