javascript - 附加一个 onchange 对象是一个闭包吗？

Question

我搜索过之前的 SO 帖子 here , here和 here ，并且无法给出对我来说有意义的答案。这应该是一个基本问题，但我不理解我找到的帖子。他们似乎没有使用 this 参数来解决。

我想以编程方式添加一个带有 onchange 事件的输入，这样最终的结果是这样的:

 <input type="button" onchange="handleButtonOnChange(this)">ClickMe</input>

我正在开发一个在旧的 Delphi 应用程序中使用嵌入式 IE6 浏览器的项目，因此我必须有一个与 IE6 兼容的解决方案(是的，IE6 很糟糕，但我坚持使用它是有原因的现在)。

我最初的尝试是这样的:

var DaySelect = document.createElement("select");
DaySelect.id = ParentID+"-day";
DaySelect.disabled = true;
MonthSelect.onchange="handleDayChange(this);"  //<--- not correct
Parent.appendChild(DaySelect);

然后我读到应该为 .onchange 分配一个对象，而不是一个字符串，应该改用它:

MonthSelect.onchange=handleDayChange;  //<--- '(this)' removed

但在我看来，这将导致这个元素(注意缺少的 this 参数)

 <input type="button" onchange="handleButtonOnChange">ClickMe</input>

如果我使用下面的行，相反，这不会产生一个闭包，并且“this”将引用对象被分配给 .onchange 属性时的事件，而不是在变化事件的时间？

//Does the line below make a closure?  
MonthSelect.onchange=handleDayChange(this);  //<-- What does 'this' refer to?

我是一个相对较新的网络程序员，但长期使用 Delphi 程序员。关闭仍然让我头疼。我很感激这方面的任何帮助。

此外，我阅读了 here关于使用 addEventListener 和旧版本 IE 的问题，页面上的最后一篇文章提供了解决方法。但我不明白它是如何工作的。

编辑——那么传递其他参数呢？似乎许多事件处理程序需要具有特定于附加元素的参数。似乎无法添加带有任何参数的监听器。

Answer 1

如果您在 JS 中创建元素，则一个简单的闭包:

var DaySelect = document.createElement("select");
DaySelect.id = ParentID+"-day";
DaySelect.disabled = true;
MonthSelect.onchange=function(){handleDayChange(DaySelect);};
Parent.appendChild(DaySelect);

由于该函数是在您创建元素的作用域内创建的，因此它可以使用相同的变量。

编辑:

可以使用此方法传递其他参数，例如，我们创建并附加为处理程序的匿名函数仍会将事件对象发送给它:

函数(e){handleDayChange(DaySelect, e);};

在事件对象中，您可以访问事件目标，但在您的示例中，事件目标和“this”不是同一元素，因此处理程序无法了解 DaySelect 元素。

jQuery 使许多事件处理变得更加简单，这是许多人使用它的原因之一，它还在各种浏览器之间标准化了它的方法，因此您不必编写相同代码的多个版本(在大多数情况下)