Question

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

Answer 1

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

在处理程序中，this将是触发事件的元素。

所以你可以写：

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

Answer 2

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

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

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

在您的示例中，您没有使用eventhandler引用该函数，而是执行该函数。这就是this可能引用窗口（取决于此行代码的位置）或其他元素的原因。

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

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

Javascript：更改onchange并使用此参数

2 个答案: