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

第一个不起作用，因为它包含在括号中，因此它是一个函数＆＃34;表达式＆＃34;而不是函数＆＃34;声明＆＃34;。表达式意味着＆＃34;评估＆＃34;，因此当您的元素获得焦点时，表达式将被计算，但不会被调用。此外，您有双引号嵌套在双引号内，这将导致语法错误（"yellow"）。那些需要改为单引号。

第二个是有效的，因为＆＃34;表达＆＃34;由第二组括号(this)立即调用。

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

创建难以阅读的意大利面条代码并导致重复代码
创建全局包装函数，改变this绑定功能
请勿遵守W3C DOM Event标准

相反，请在JavaScript中编写事件处理程序：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是你没有调用第一个函数。从本质上讲，你是在声明一个函数但从不调用它。

示例：

＆＃13;

(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

＆＃13;

由于您在函数中使用了双引号（"），因此在第一个示例中也遇到了问题。由于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方法，因为您已经将“this”元素传递给自调用函数。

但是像Scott已经提到过你应该使用DOM Event Standard，通过HTLM属性处理evetns是老派。

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

4 个答案: