Javascript：更改 onchange 并使用此参数

Question

通过搜索网络我发现我不能使用 document.getElementById("myid").onchange="myfunc(this);"; 因为我必须分配一个函数而不是一个字符串。但是当我改用 document.getElementById("myid").onchange = myfunc(this); 时， this 指的是什么？我希望 this 成为触发 onchange 事件的 HTML 元素，而不是我正在更改 onchange 属性的函数。

Answer 1

您可以接收事件并从中获取源元素：

function myfunc(ev) {
    console.log(ev.srcElement);
}

document.getElementById("myid").onchange = myfunc;

在您的示例中，您没有使用事件处理程序引用函数，而是执行函数。这就是为什么 this 可能引用 Window（取决于此行代码所在的位置）或其他元素。

但是当您将事件处理程序定义为 html 元素的属性时，this 可以提供帮助： https://www.w3schools.com/tags/ev_onchange.asp

更多信息： https://developer.mozilla.org/en-US/docs/Web/Events/change

Answer 2

标准方法不是将元素作为第一个参数传递给函数，而是在函数中使用 this 引用元素，因为 this 将自动绑定到该元素。这是来自 MDN article on onclick，但它适用于所有 on-事件属性：

Within the handler, this will be the element upon which the event was triggered.

所以你可以写：

document.getElementById("myid").onchange = myfunc;

... 在您的函数中：

function myfunc() {
    console.log(this.id + ' changed'); // you can just refer to `this`
}

如果出于某种原因你确实需要函数的第一个参数作为相关元素，那么你可以使用 bind:

var elem = document.getElementById("myid");
elem.onchange = myfunc.bind(elem, elem);

注意elem指定了两次；第一次定义 this，第二次定义第一个参数的值。

所以现在这行得通了：

function myfunc(elem) {
    console.log(elem.id + ' changed');
}

Javascript：更改 onchange 并使用此参数

Javascript: change onchange AND use this-parameter

javascript

onchange