Javascript 调用与事件关联的匿名函数

以下代码不起作用：

<input id="inp" type="text"
onfocus="(function(){document.getElementById('inp').style.background="yellow";})">

但我希望该代码能够正常工作：

<input id="inp" type="text"
onfocus="(function(e){document.getElementById('inp').style.background ='yellow';}(this)">

---

为什么第一个代码不起作用？

第一个代码不起作用，因为它被包装在括号中，因此它是一个函数“表达式”，而不是一个函数“声明”。表达式意味着要被“计算”，因此当您的元素获得焦点时，表达式将被计算，但不会被调用。此外，双引号中嵌套了双引号，这将导致语法错误（

“yellow”

）。这些将需要更改为单引号

第二个有效，因为第二组括号

（this）

会立即调用“表达式”

然而，这两种语法都应该避免。不要使用内联HTML事件属性连接事件处理回调函数，因为它们：

• 创建难以阅读并导致重复的意大利面代码 密码
• 创建全局包装函数，以更改 作用
• 不要遵循标准

相反，请使用JavaScript编写事件处理程序：

//获取对DOM元素的引用
var输入=document.getElementById（“inp”）；
//连接事件处理程序
input.addEventListener（“焦点”，函数（e）{
input.style.background='yellow'；
});
问题在于您没有调用第一个函数。本质上，您是在声明一个函数，但从未调用它

例如：


（函数（）{
log（'我想做点什么，但没人叫我'）；
}); //  由于以下原因，第一个已停止工作：
IIFE语法类似于
（function（）{}（））
，
“
围绕黄色是预先关闭onfocus的

正确的语法是这样的

斯科特已经很好地回答了您的问题。我只想在您的第二个示例中添加以下内容：

<input id="inp" type="text"
onfocus="(function(e){document.getElementById('inp').style.background ='yellow';}(this)">



应该是：

<input id="inp" type="text" onfocus="(function(that) {that.style.background='yellow'})(this);">



无需使用document.getElemetnsById方法，因为您已经将“this”元素传递给了自调用函数

但正如Scott已经提到的，您应该使用DOM事件标准，通过HTLM属性处理EVETN是老派的做法。
内联事件处理程序是不好的做法，部分原因是因为这个原因。HTML属性和字符串文本之间的引号变得模棱两可。提示：看看
黄色前后语法突出显示的区别“
第一个部分根本不使用IIFE语法，而且IIFE部分的位置可以在主表达式的内部或外部。实际上，您需要document.getElementById。。。。因为“this”不能与内联HTML事件处理属性正确绑定此“将绑定到”窗口“。这是错误的，在本例中，方法的所有者是HtmleElement对象，因为对该方法的引用位于HtmleElement的.onlclik属性中。这篇文章解释了正在发生的事情。如果您将我的代码段输入JFIDLE，您将看到它工作正常。代码工作的唯一原因是您将“this”传递到函数中并将其作为“that”接收。在函数中，“this”绑定到窗口。首先不要使用内联HTML事件属性，不要跳过这一环，也不要出于我上面列出的所有原因。重要的是要理解，
onclick
中的代码范围是HTMLElement，但所提供的回调实际上被包装在一个全局作用域的匿名函数中，并且所提供的回调将在该作用域（全局）内执行。由于
此
不在callbaack内，因此不会被禁用。这就是你的代码工作的原因。