調用與事件

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是老派。