javascript 将此对象作为 onChange 事件中的参数传递？

passing this object as argument in onChange event?

提问by emilly

I want to make an eventHandler that passes "this" object as parameter. I tried this

我想制作一个将“this”对象作为参数传递的 eventHandler。我试过这个

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

it works fine and get the the dom object on which on change even was called.

它工作正常，并获得了在更改时甚至被调用的 dom 对象。

But as per my understanding this should not work as first argument is expected as "event" (not the "this" object )in event handler method like below

但根据我的理解，这不应该像下面这样的事件处理程序方法中的第一个参数预期为“事件”（而不是“this”对象）

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

can we pass any argument(this or event) in eventHandler method provide their name is correct or first argument will always be considered as event object?

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

采纳答案by Felix Kling

Youdefined custChangeand more importantly: youare calling it. Hence you can decide for yourself which arguments it should accept and in which order. Only for functions that are notcalled by you, you have to pay attention to the order of arguments.

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

But if you want to define custChangeso that it is compatible with other waysof binding event handlers, i.e.

但是如果你想定义custChange以便它与绑定事件处理程序的其他方式兼容，即

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

then you can call it with

然后你可以用

custChange.call(this, event);

回答by Zhang Yang

I have made a test.

我做了一个测试。

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>

I operated selects above one by one, then got console-information below:

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

• [select, Event]
• [Event, select]
• Uncaught ReferenceError: e is not defined

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

So, from the results, I got the conclusion that we must pass the correct word in page calling, and could change their position.

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

回答by Thierry J.

The first argument will always be the event.

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

[edit]You can call your handler with whatever argument you want, the eventand thisobjects being available when called. eventrefers to the event object, and thisrefers to the dom object firing the event.[/edit]

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

However, in the handler event.currentTargetwill link back to the object that fired the event:

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

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

回答by ZaoTaoBao

Maybe you can do ti sth like this:

也许你可以这样做：

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

I hope it helps.

我希望它有帮助。

回答by Sergio

You can do it according to unobtrusive javaScript:

您可以根据不显眼的 javaScript 进行操作：

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