调用与事件

Question

相关联的匿名函数下面的代码不起作用

<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)"> 

为什么没有第一个代码工作？

Answer 1

第一个不起作用，因为它被括在括号中，因此它是一个函数“表达式”，而不是函数“声明”。表达式意味着被“评估”，所以当你的元素获得焦点时，表达式被评估，但不被调用。另外，双引号内嵌有双引号，这会导致语法错误（"yellow"）。那些需要改为单引号。

第二个工作，因为“表达式”立即由第二组括号(this)调用。

但是，应避免这两种语法。不要使用内嵌HTML事件属性线了事件处理的回调函数，因为它们：

• 创建面条代码是难以阅读，并导致代码
• 创建改变this全球包装功能重复 在 功能结合
• 不按W3C DOM Event标准

相反，写你的事件处理程序在JavaScript：

// Get a reference to the DOM element 
 
var input = document.getElementById("inp"); 
 

 
// Wire up an event handler 
 
input.addEventListener("focus", function(e){ 
 
    input.style.background ='yellow'; 
 
});

<input id="inp" type="text">

Answer 2

的问题是，你是不是调用第一功能。基本上，你声明了一个函数，但从来没有调用它。

例子：

(function() { 
 
    console.log('I would do something but no one calls me'); 
 
}); // <-- Notice the lack of() 
 

 
(function() { 
 
    console.log('I do something because I am called'); 
 
})(); // <-- Notice the() on the end

您还可以在第一个例子麻烦，由于您使用的功能双引号（"）的。由于onfocus属性值必须用双引号括起来，因此过早地关闭了该属性。

<input onfocus="console.log("I won't work since I'm closing the quotes");" /> 

Answer 3

第一个已经不工作，因为： IIFE语法是这样(function(){}())和"周围黄色的是前关闭的onfocus。

更正的语法是这样的。

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

Answer 4

斯科特已经回答了你的问题非常好。我只是想添加到您的第二个例子：

<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方法，你已经通过了“本”元素自我调用功能。

但就像斯科特已经提到你应该使用DOM事件标准，通过HTLM属性处理evetns是老派。