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

Question

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

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

它工作正常，并获得了 on change 甚至被调用的 dom 对象。

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

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

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

Answer 1

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

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

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

然后你可以用

custChange.call(this, event);

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>

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

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

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

Answer 3

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

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

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

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

Answer 4

你可以根据不显眼的 javaScript 来做：

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

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

我希望它有所帮助。